/* ==========================================================================
   FlorioPosy — Design Tokens
   Derived from NANOBANANA-HANDOFF §3 (art-direction spec)
   ========================================================================== */

:root,
[data-theme='light'] {
  /* — Surfaces (parchment world) — */
  --color-bg:               #FBF9F2;   /* warm parchment */
  --color-surface:          #FDFCF7;   /* lifted parchment */
  --color-surface-2:        #F5F1E6;   /* softer parchment */
  --color-surface-offset:   #ECE6D6;   /* dusty parchment */
  --color-surface-dark:     #1A1D18;   /* moss-charcoal (dark chapters) */
  --color-surface-inkwell:  #141613;   /* deepest ledger */

  --color-divider:          #E2DDCE;
  --color-border:           #D6D0BE;

  /* — Ink (text) — */
  --color-text:             #25231F;   /* warm near-black headlines */
  --color-text-lockup:      #1A1A1A;   /* wordmark black */
  --color-text-muted:       #6B665C;
  --color-text-faint:       #A39E92;
  --color-text-inverse:     #F5F1E6;   /* on dark chapters */
  --color-text-inverse-muted: #A39E92;

  /* — Brand accent — burnt orange, one per viewport max — */
  --color-accent:           #D9793F;   /* THE brand hue */
  --color-accent-hover:     #C46A35;
  --color-accent-active:    #A55628;
  --color-accent-tint:      rgba(217, 121, 63, 0.10);
  --color-flower:           #F58220;   /* logo petal mark only — master brand orange */

  /* — Supporting botanicals (never compete with accent) — */
  --color-sage:             #8A9480;
  --color-ochre:            #D9A441;
  --color-plum:             #4A3440;

  /* — Radius: NO ROUNDED CORNERS (Aesop signal) — */
  --radius-sm:              0;
  --radius-md:              0;
  --radius-lg:              0;
  --radius-full:            9999px;    /* only for the eight-petal mark */

  /* — Motion — */
  --ease-film:              cubic-bezier(0.16, 1, 0.3, 1);   /* slow ease-out */
  --ease-cinema:            cubic-bezier(0.65, 0, 0.35, 1);  /* symmetrical */
  --dur-quick:              260ms;
  --dur-still:              600ms;
  --dur-scene:              1200ms;
  --transition-interactive: 260ms var(--ease-film);

  /* — Shadows (warm, tone-matched) — */
  --shadow-sm:  0 1px 2px rgba(37, 35, 31, 0.06);
  --shadow-md:  0 8px 24px rgba(37, 35, 31, 0.08);
  --shadow-lg:  0 24px 64px rgba(37, 35, 31, 0.14);
  --shadow-glow: 0 0 80px rgba(217, 121, 63, 0.22);

  /* — Type scale (informational, fluid) — */
  --text-xs:    clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
  --text-sm:    clamp(0.8125rem, 0.75rem + 0.30vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:   clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero:  clamp(3rem, 0.5rem + 7vw, 8rem);

  /* — Spacing (4px base) — */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;
  --space-40:   10rem;
  --space-48:   12rem;

  /* — Content widths — */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-huge:    1440px;

  /* — Fonts — */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-display-alt: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-eyebrow: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
}

/* ============ DARK MODE (invert the parchment) ============ */
[data-theme='dark'] {
  --color-bg:               #141613;
  --color-surface:          #1A1D18;
  --color-surface-2:        #22251F;
  --color-surface-offset:   #2A2D26;
  --color-surface-dark:     #0F110E;
  --color-surface-inkwell:  #0A0B09;

  --color-divider:          #2D302A;
  --color-border:           #3A3D35;

  --color-text:             #EEEAD9;
  --color-text-lockup:      #F5F1E6;
  --color-text-muted:       #A39E92;
  --color-text-faint:       #6B665C;
  --color-text-inverse:     #25231F;
  --color-text-inverse-muted: #6B665C;

  --color-accent:           #E88A50;    /* slightly lifted for dark */
  --color-accent-hover:     #F09B65;
  --color-accent-active:    #C46A35;
  --color-accent-tint:      rgba(232, 138, 80, 0.14);
  --color-flower:           #F58220;    /* logo petal mark only — same in both themes */

  --color-sage:             #A5B09B;
  --color-ochre:            #E4B85A;
  --color-plum:             #6B4A5A;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.60);
  --shadow-glow: 0 0 80px rgba(232, 138, 80, 0.28);
}

/* System dark fallback — used only when no [data-theme] attribute is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #141613;
    --color-surface:          #1A1D18;
    --color-surface-2:        #22251F;
    --color-surface-offset:   #2A2D26;
    --color-divider:          #2D302A;
    --color-border:           #3A3D35;
    --color-text:             #EEEAD9;
    --color-text-muted:       #A39E92;
    --color-text-faint:       #6B665C;
    --color-text-inverse:     #25231F;
    --color-accent:           #E88A50;
  }
}