/* ============================================================
   The Sunshine Club — Colors & Type
   ============================================================
   Brand palette is intentionally narrow: warm gold + earthy brown
   on a cream paper background. No bright accents. The vibe is
   spiritual, feminine, structured.
   ============================================================ */

/* --- Fonts -------------------------------------------------- */
/* Playfair Display — display serif (titles), from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Aileron — body sans-serif, free font by Sora Sagano (dot-colon.com)
   Hosted via cdnfonts; falls back to Hanken Grotesk / system humanist sans.
   If Aileron files are provided locally, drop them into fonts/ and uncomment below. */
@import url('https://fonts.cdnfonts.com/css/aileron');

/* Fallback that ships with Google Fonts in case cdnfonts is blocked */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

/* JetBrains Mono — monospace (code, technical labels), from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* Brand — the holy trinity */
  --tsc-gold:        #C89232; /* primary — titles, accents, sun motifs */
  --tsc-brown:       #5A4632; /* body text, dark elements */
  --tsc-cream:       #F5EFE3; /* paper / page background */

  /* Gold scale (for hover, tints, borders) */
  --tsc-gold-50:     #FBF4E4;
  --tsc-gold-100:   #F4E4BE;
  --tsc-gold-200:   #E8CC85;
  --tsc-gold-300:   #DDB55A;
  --tsc-gold-400:   #D2A23F;
  --tsc-gold-500:   #C89232; /* = brand gold */
  --tsc-gold-600:   #A6792A;
  --tsc-gold-700:   #815E21;
  --tsc-gold-800:   #5C431A;

  /* Brown / earth scale */
  --tsc-brown-50:   #EFE9DF;
  --tsc-brown-100:  #D7CCBA;
  --tsc-brown-200:  #B8A88F;
  --tsc-brown-300:  #8E7A5E;
  --tsc-brown-400:  #715A43;
  --tsc-brown-500:  #5A4632; /* = brand brown */
  --tsc-brown-600:  #463623;
  --tsc-brown-700:  #2F2417;

  /* Cream / paper scale */
  --tsc-cream-50:   #FDFBF6;
  --tsc-cream-100:  #FAF5EA;
  --tsc-cream-200:  #F5EFE3; /* = brand cream */
  --tsc-cream-300:  #ECE3CF;
  --tsc-cream-400:  #DDD0B4;

  /* Semantic (kept warm, never harsh) */
  --tsc-success:    #6F8A4C; /* sage olive */
  --tsc-warning:    #D69B3C; /* honey */
  --tsc-error:      #B8553A; /* terracotta */
  --tsc-info:       #6B7B8C; /* dust blue (rare) */

  /* Foreground / background semantic aliases */
  --fg-1: var(--tsc-brown-500);       /* default body text */
  --fg-2: var(--tsc-brown-400);       /* secondary text */
  --fg-3: var(--tsc-brown-300);       /* muted / captions */
  --fg-accent: var(--tsc-gold-500);   /* gold accent text */
  --fg-inverse: var(--tsc-cream-100); /* text on dark/gold backgrounds */

  --bg-1: var(--tsc-cream-200);       /* page */
  --bg-2: var(--tsc-cream-100);       /* raised surface */
  --bg-3: var(--tsc-cream-50);        /* highest surface (cards, modals) */
  --bg-accent: var(--tsc-gold-500);   /* gold panels / CTA backgrounds */
  --bg-dark: var(--tsc-brown-500);    /* dark sections */

  --border-1: var(--tsc-brown-100);   /* default hairline */
  --border-2: var(--tsc-gold-200);    /* gold accent line */
  --border-strong: var(--tsc-brown-300);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Aileron", "Hanken Grotesk", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (perfect fourth, ~1.333) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  /* Line heights */
  --lh-tight: 1.05;  /* @kind font */
  --lh-snug:  1.25;  /* @kind font */
  --lh-base:  1.55;  /* @kind font */
  --lh-loose: 1.75;  /* @kind font */

  /* Tracking */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-wide:   0.08em;  /* @kind font */
  --ls-wider:  0.2em;   /* @kind font */ /* for all-caps eyebrows */

  /* Weights */
  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */

  /* ============================================================
     SPACING / RADII / SHADOW / MOTION
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* Soft warm shadows — never harsh */
  --shadow-sm: 0 1px 2px rgba(90, 70, 50, 0.06);
  --shadow-md: 0 4px 14px rgba(90, 70, 50, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(90, 70, 50, 0.18);
  --shadow-gold: 0 8px 28px -10px rgba(200, 146, 50, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Motion — gentle, never bouncy */
  --ease-soft:  cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-rise:  cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:   150ms; /* @kind other */
  --dur-base:   250ms; /* @kind other */
  --dur-slow:   500ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TEXT STYLES
   ============================================================ */

.tsc-eyebrow,
[data-text="eyebrow"] {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}

h1, .tsc-h1, [data-text="h1"] {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(40px, 5.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h2, .tsc-h2, [data-text="h2"] {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(30px, 4vw, var(--fs-3xl));
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h3, .tsc-h3, [data-text="h3"] {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .tsc-h4, [data-text="h4"] {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .tsc-p, [data-text="p"] {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.tsc-lead, [data-text="lead"] {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

small, .tsc-caption, [data-text="caption"] {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.tsc-quote, [data-text="quote"] {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

code, .tsc-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Body default */
body.tsc {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}