/* Swiss Influencer Network - Design Tokens
 * Central brand variables ported from the /app/ design.
 * Change a value here and every .sin-* component across the site updates.
 * Safe: only :root variables + @font import. Nothing is styled until a .sin-* class is used.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand colours */
  --sin-gold: #C5A059;
  --sin-gold-deep: #8b6914;
  --sin-gold-soft: #d4b47a;
  --sin-gold-dark: #3d3424;
  --sin-page: #f7f5f2;
  --sin-mist: #faf8f5;
  --sin-ink: #1c1917;
  --sin-ink-soft: #44403c;
  --sin-muted: #78716c;
  --sin-line: #e7e5e4;
  --sin-dark: #0f0e0d;
  --sin-white: #ffffff;

  /* Typography */
  --sin-font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --sin-font-display: 'Fraunces', Georgia, serif;

  /* Radius */
  --sin-radius-sm: 0.5rem;
  --sin-radius: 0.75rem;
  --sin-radius-lg: 1rem;
  --sin-radius-xl: 1.5rem;
  --sin-radius-2xl: 2rem;

  /* Shadows */
  --sin-shadow: 0 24px 80px -16px rgba(197, 160, 89, 0.22);
  --sin-shadow-lg: 0 32px 100px -20px rgba(15, 14, 13, 0.35);
  --sin-shadow-card: 0 8px 32px -12px rgba(15, 14, 13, 0.12);

  /* Gradients */
  --sin-gradient-gold: linear-gradient(135deg, var(--sin-gold-dark), var(--sin-gold), var(--sin-gold-soft));
  --sin-gradient-gold-row: linear-gradient(90deg, #3d3424, #9a7230, #C5A059);

  /* Layout */
  --sin-container: 80rem;
  --sin-container-narrow: 48rem;
}