/* ==========================================================================
   Sacred AI — Design Tokens
   --------------------------------------------------------------------------
   Design system reverse-engineered from tastelabs.com (editorial / Swiss-min
   AI-studio language). Brand is INTERIM — a real Sacred AI brand later is a
   token swap here, not a rebuild. Touch the "Semantic" + "Type" blocks only.
   ========================================================================== */

:root {
  /* --- Raw palette (Taste Labs system) --------------------------------- */
  --c-coral:       #ff3d00;   /* Chakra vermillion — accent */
  --c-coral-deep:  #db3500;
  --c-blue:        #002bba;   /* (retired cobalt — kept for reference) */
  --c-blue-deep:   #001f87;
  --c-black:       #212121;
  --c-dark-grey:   #272726;
  --c-grey:        #747370;
  --c-grey-light:  #a8a7a3;
  --c-cream:       #eaece7;
  --c-whitesmoke:  #fbfbfb;
  --c-white:       #ffffff;

  /* --- Semantic (rebrand swaps live here) ------------------------------ */
  --bg:            #1c1c1b;                /* page ground — matches hero charcoal */
  --bg-cream:      var(--c-cream);        /* (retired light section) */
  --bg-dark:       #1c1c1b;                /* hero charcoal           */
  --bg-darker:     #161615;                /* subtle alt for rhythm   */

  --text:          var(--c-black);
  --text-inverse:  var(--c-whitesmoke);
  --text-muted:    var(--c-grey);
  --text-muted-dark: #9b9a96;             /* muted text on dark bg  */

  --accent:        var(--c-coral);
  --accent-hover:  var(--c-coral-deep);
  --on-accent:     var(--c-white);

  --hairline:        rgba(33, 33, 33, .12);
  --hairline-light:  rgba(255, 255, 255, .14);

  /* --- Type ------------------------------------------------------------- */
  /* Taste uses NO serif — mono + grotesque only.
     Switzer ≈ Matter (geometric grotesque) for headlines/wordmark/display ·
     Azeret Mono for nav, labels, buttons. Swap families to rebrand.        */
  --font-sans:    'Matter', 'Switzer', 'Inter', Arial, sans-serif;
  --font-mono:    'Azeret SemiMono', 'Azeret Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-display: 'Matter', 'Switzer', 'Inter', Arial, sans-serif;
  --font-serif:   var(--font-sans); /* serif retired — alias kept so existing rules resolve to grotesque */
  --font-wordmark: 'Fraunces', 'Playfair Display', Georgia, serif; /* high-contrast display serif — closest match to the Chakra wordmark */

  /* fluid scale (Taste fixed scale: 64/48/32/24/18/16 as the desktop caps) */
  --fs-display: clamp(3.25rem, 9vw, 7.5rem);   /* hero wordmark            */
  --fs-xl:      clamp(2.25rem, 4vw, 3rem);      /* 48 — section headlines   */
  --fs-l:       clamp(1.9rem, 3.6vw, 3rem);     /* 48                       */
  --fs-m:       clamp(1.4rem, 2.4vw, 2rem);     /* 32                       */
  --fs-s:       clamp(1.2rem, 1.8vw, 1.5rem);   /* 24                       */
  --fs-body:    1.125rem;                        /* 18 — copytext            */
  --fs-small:   1rem;                            /* 16                       */
  --fs-label:   0.8125rem;                       /* 13 — mono eyebrows       */

  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;

  --lh-tight:  1.08;
  --lh-head:   1.2;
  --lh-body:   1.5;

  --ls-tight:  -0.02em;   /* headline tracking */
  --ls-tighter: -0.035em;
  --ls-label:  0.14em;    /* mono eyebrow tracking */

  /* --- Spacing (rem scale, like Taste 0.25 → 10rem) -------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  1rem;
  --sp-4:  1.5rem;
  --sp-5:  2rem;
  --sp-6:  3rem;
  --sp-7:  4rem;
  --sp-8:  5rem;
  --sp-9:  7rem;
  --sp-10: 10rem;

  --section-pad-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* --- Radius ----------------------------------------------------------- */
  --r-pill: 100px;
  --r-nav:  20px;
  --r-card: 16px;
  --r-sm:   8px;

  /* --- Layout ----------------------------------------------------------- */
  --maxw:      78rem;   /* content container */
  --maxw-text: 46rem;   /* prose measure     */

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.7s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.01s; }
}

/* ==========================================================================
   Light theme — inverted ground. Toggled via .theme-light on <html>.
   Only the semantic layer flips; the raw palette + accent stay put.
   ========================================================================== */
.theme-light {
  --bg:            #faf8f3;   /* warm white page ground            */
  --bg-cream:      #f0eee8;
  --bg-dark:       #faf8f3;   /* former dark sections → white      */
  --bg-darker:     #f1efe9;   /* subtle alt                        */

  --text:          #1c1c1b;
  --text-inverse:  #1c1c1b;   /* text on former-dark sections → dark */
  --text-muted:    #74726c;
  --text-muted-dark: #74726c;

  --hairline:        rgba(28, 28, 27, .12);
  --hairline-light:  rgba(28, 28, 27, .12);
  /* --accent / --on-accent unchanged — vermillion works on both */
}