/* ============================================================
   PIAF ALIGNMENT STUDIO — TAILWIND v4 @theme CONFIG
   Drop into your Tailwind v4 entry CSS (after @import "tailwindcss").
   Exposes the full ramps + semantic tokens as Tailwind utilities,
   e.g. bg-background, text-text-muted, border-border, bg-clay-500,
   font-display, rounded-md, shadow-md.

   Semantic tokens reference CSS variables, so wrapping a subtree in
   [data-theme="dark"] flips the whole palette with zero utility
   changes. Pair this file with tokens/colors.css (which defines the
   --spine / --stone / --clay ramps and the light/dark semantic maps)
   and tokens/spacing.css (which defines the --elev-* elevation values
   behind shadow-*). Linking styles.css pulls in both.
   ============================================================ */

@theme inline {
  /* --- Warm Spine ramp --- */
  --color-spine-0:   #FAF8F4;
  --color-spine-50:  #F5F2EC;
  --color-spine-100: #EDE9E1;
  --color-spine-200: #DDD7CC;
  --color-spine-300: #D9C6B0;
  --color-spine-400: #C1A685;
  --color-spine-500: #A07E65;
  --color-spine-600: #7D5A4A;
  --color-spine-700: #5F3E34;
  --color-spine-800: #392927;
  --color-spine-900: #341D17;
  --color-spine-950: #1D1311;

  /* --- Stone ramp --- */
  --color-stone-50:  #F6F5F1;
  --color-stone-100: #EDEBE5;
  --color-stone-200: #DDDBD3;
  --color-stone-300: #CDCAC1;
  --color-stone-400: #BDBAB0;
  --color-stone-500: #9B988F;
  --color-stone-600: #77746C;
  --color-stone-700: #58554E;
  --color-stone-800: #403D37;
  --color-stone-900: #2B2823;
  --color-stone-950: #1A1814;

  /* --- Clay ramp (accent · Deeper Terracotta) --- */
  --color-clay-50:  #F4EAE5;
  --color-clay-100: #EAD3CA;
  --color-clay-200: #DEB6A6;
  --color-clay-300: #D99F8F;
  --color-clay-400: #D38878;
  --color-clay-500: #CB7967;
  --color-clay-600: #B16351;
  --color-clay-700: #894736;
  --color-clay-800: #6C3629;
  --color-clay-900: #522921;
  --color-clay-950: #381C17;

  /* --- Extended · brand secondaries (functional, small doses) --- */
  --color-sage-50:#F0F5EE;--color-sage-100:#DAE7D7;--color-sage-200:#C3D8BE;--color-sage-300:#A9C6A3;--color-sage-400:#88AA80;--color-sage-500:#72966A;--color-sage-600:#5B7E54;--color-sage-700:#44613D;--color-sage-800:#334B2E;--color-sage-900:#253721;--color-sage-950:#1A2717;
  --color-ochre-50:#F9F2EA;--color-ochre-100:#EFE1CE;--color-ochre-200:#E5CDAD;--color-ochre-300:#D6B68B;--color-ochre-400:#BD9763;--color-ochre-500:#AB8349;--color-ochre-600:#916B33;--color-ochre-700:#715120;--color-ochre-800:#583E16;--color-ochre-900:#412D10;--color-ochre-950:#2E200B;
  --color-teal-50:#EBF6F6;--color-teal-100:#CFE9E8;--color-teal-200:#AFDBDA;--color-teal-300:#8CC9C8;--color-teal-400:#62ADAD;--color-teal-500:#449A9A;--color-teal-600:#2A8282;--color-teal-700:#166464;--color-teal-800:#0D4E4E;--color-teal-900:#0B3939;--color-teal-950:#082828;
  --color-plum-50:#FAF0F5;--color-plum-100:#F3DBE7;--color-plum-200:#EAC4D8;--color-plum-300:#DDABC6;--color-plum-400:#C48AAA;--color-plum-500:#B27497;--color-plum-600:#985D7F;--color-plum-700:#774662;--color-plum-800:#5D354C;--color-plum-900:#442638;--color-plum-950:#311B27;
  --color-lavender-50:#F6F2F8;--color-lavender-100:#E9DFEC;--color-lavender-200:#DBCAE1;--color-lavender-300:#CAB3D1;--color-lavender-400:#AE93B7;--color-lavender-500:#9B7FA4;--color-lavender-600:#83678B;--color-lavender-700:#654E6D;--color-lavender-800:#4E3C54;--color-lavender-900:#3A2C3E;--color-lavender-950:#291E2C;

  /* --- Extended · semantic UI states (earthy) --- */
  --color-success-50:#EFF6EF;--color-success-100:#D9E8D9;--color-success-200:#C0D9C0;--color-success-300:#A6C7A6;--color-success-400:#84AA84;--color-success-500:#6D976E;--color-success-600:#577F58;--color-success-700:#406241;--color-success-800:#304C31;--color-success-900:#233823;--color-success-950:#182719;
  --color-warning-50:#F8F3EA;--color-warning-100:#EEE1CD;--color-warning-200:#E3CEAD;--color-warning-300:#D5B78B;--color-warning-400:#BB9863;--color-warning-500:#A98448;--color-warning-600:#8F6C32;--color-warning-700:#70521F;--color-warning-800:#573F15;--color-warning-900:#402E0F;--color-warning-950:#2D200A;
  --color-error-50:#FEF0EE;--color-error-100:#FADAD7;--color-error-200:#F6C3BE;--color-error-300:#ECA8A2;--color-error-400:#D48680;--color-error-500:#C3706A;--color-error-600:#A75954;--color-error-700:#84413D;--color-error-800:#67312E;--color-error-900:#4C2421;--color-error-950:#361917;
  --color-info-50:#EBF6F6;--color-info-100:#CFE9E9;--color-info-200:#AFDBDC;--color-info-300:#8CC9CB;--color-info-400:#61ADAF;--color-info-500:#439A9D;--color-info-600:#2A8184;--color-info-700:#156466;--color-info-800:#0D4D4F;--color-info-900:#0A393A;--color-info-950:#082829;

  /* --- Semantic tokens (theme-reactive via CSS vars) --- */
  --color-background:     var(--background);
  --color-surface:        var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-surface-sunken: var(--surface-sunken);
  --color-text:           var(--text);
  --color-text-subtle:    var(--text-subtle);
  --color-text-muted:     var(--text-muted);
  --color-accent:         var(--accent);
  --color-accent-hover:   var(--accent-hover);
  --color-accent-muted:   var(--accent-muted);
  --color-accent-text:    var(--accent-text);
  --color-on-accent:      var(--on-accent);
  --color-border:         var(--border);
  --color-border-strong:  var(--border-strong);
  --color-ring:           var(--ring);

  /* --- Type --- */
  --font-display: 'Canela Deck', 'Cormorant Garamond', Georgia, 'Noto Serif HK', serif;
  --font-logo:    'Moglan', 'Canela Deck', Georgia, serif;
  --font-quote:   'Cormorant Garamond', 'Canela Deck', Georgia, serif;
  --font-sans:    'Montserrat', 'Noto Sans HK', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif-zh:'Noto Serif HK', 'Canela Deck', serif;
  --font-quote-zh:'Noto Serif HK', 'Canela Deck', serif;
  --font-sans-zh: 'Noto Sans HK', 'Montserrat', sans-serif;

  /* --- Type scale — registers text-hero … text-eyebrow utilities.
     LITERALS on purpose, kept in sync with tokens/typography.css:
     a var() self-reference (--text-base: var(--text-base)) becomes
     CYCLIC when a consumer loads styles.css inside a cascade layer
     below Tailwind's theme layer (e.g. layer(piaf-brand)) — the
     custom property computes to invalid and every text-* utility
     and .piaf-* role size collapses to the browser default. */
  /* Primitives — Tailwind's own steps/values, so text-lg etc. behave
     as expected. LITERALS on purpose: a var() self-reference goes
     cyclic when a consumer loads styles.css inside a cascade layer
     below Tailwind's theme layer. Keep in sync with
     tokens/typography.css. */
  --text-xs:       0.75rem;   /* 12 */
  --text-sm:       0.875rem;  /* 14 */
  --text-base:     1rem;      /* 16 */
  --text-lg:       1.125rem;  /* 18 */
  --text-xl:       1.25rem;   /* 20 */
  --text-2xl:      1.5rem;    /* 24 */
  --text-3xl:      1.875rem;  /* 30 */
  --text-4xl:      2.25rem;   /* 36 */
  --text-5xl:      3rem;      /* 48 */
  /* Roles */
  --text-hero:     clamp(2.25rem, 1.6rem + 3.2vw, 3rem); /* 36 → 48 */
  --text-display:  2.25rem;   /* 36 */
  --text-quote:    clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); /* 24 → 30 */
  --text-title:    1.5rem;    /* 24 */
  --text-subhead:  1.25rem;   /* 20 */
  --text-body:     1rem;      /* 16 */
  --text-body-zh:  1rem;      /* 16 */
  --text-subtitle: 0.75rem;   /* 12 */
  --text-eyebrow:  0.75rem;   /* 12 */

  /* --- Radii --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* --- Shadow (via --elev-*, so dark subtrees re-resolve them) ---
     --elev-* lives in tokens/spacing.css. The literal fallback keeps
     shadow-* working for anyone importing this file without it — they
     just get the light shadow in both themes, as before.

     KNOWN LIMITATION — shadow-* does not take a colour modifier. Tailwind
     can only split a shadow's colour into --tw-shadow-color when it can
     parse the registered value, and a var() is opaque to it. So
     `shadow-md shadow-black/20` and `shadow-md/50` silently keep the warm
     brand shadow and drop the modifier — no build error. This is the
     deliberate trade for theme-reactive elevation: registering a literal
     instead would restore the modifiers but bake the light shadow into the
     utility, so [data-theme="dark"] could never darken it. Recolouring
     elevation is off-brand anyway (warm-tonal only, no harsh/grey
     shadows) — use the --elev-* and --shadow-* tokens to reshape it per theme. */
  --shadow-xs: var(--elev-xs, 0 1px 2px rgba(57,41,39,.05));
  --shadow-sm: var(--elev-sm, 0 2px 8px rgba(57,41,39,.06));
  --shadow-md: var(--elev-md, 0 8px 24px rgba(57,41,39,.08));
  --shadow-lg: var(--elev-lg, 0 18px 48px rgba(57,41,39,.12));

  /* --- Gradient surfaces (theme-reactive via CSS vars) --- */
  --background-image-gradient-surface:          var(--gradient-surface);
  --background-image-gradient-surface-diagonal: var(--gradient-surface-diagonal);
  --background-image-gradient-surface-radial:   var(--gradient-surface-radial);
  --background-image-gradient-accent:           var(--gradient-accent);
  --background-image-gradient-accent-diagonal:  var(--gradient-accent-diagonal);
  --background-image-gradient-accent-radial:    var(--gradient-accent-radial);

  /* --- Easing --- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);
}