/*
 * PerenOS — Canonical Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for the PerenOS token spine. Mirrors the
 * claude-design handoff `colors_and_type.css` (palette + derived tints +
 * semantic + scale tokens). When this file and the handoff diverge, the
 * handoff wins and this file is reconciled to it.
 *
 * Load order: this file MUST be linked BEFORE css/styles.css. styles.css
 * keeps a thin legacy-alias layer that bridges its ~418 historical
 * var(--legacy) call sites onto these canonical tokens — no visual change.
 *
 * Semantic TYPE RULES from the handoff are intentionally NOT included here
 * (they would change rendering); type-rule adoption is a later pass.
 */

/* ─── EB Garamond — local font files ────────────────────────────────────── */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ─── Space Grotesk — local font files ──────────────────────────────────── */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── Canonical token spine (mirrors handoff colors_and_type.css) ────────── */
:root {
  /* Core palette – Momo no Hana */
  --color-olive:        #5E6B22; /* Uguisu-iro · Bush Warbler Olive – PRIMARY ANCHOR (60%) */
  --color-spring:       #A8C060; /* Wakakusa-iro · Young Spring Grass – SECONDARY */
  --color-peach:        #E0A07A; /* Momo-iro · Peach Blossom – ACCENT (never background) */
  --color-gold:         #C89820; /* Yamabuki-iro · Afternoon Gold – DETAIL ACCENT */
  --color-raw-silk:     #F2EAD8; /* Shironeri · Raw Silk – BACKGROUND */
  --color-charcoal:     #1A1608; /* Deep Charcoal – TEXT / DARK */

  /* Derived tints & shades */
  --color-olive-light:  #7A8A30;
  --color-olive-dark:   #404A18;
  --color-spring-light: #C4D88C;
  --color-spring-dark:  #7A9040;
  --color-peach-light:  #EEC0A4;
  --color-peach-dark:   #C07850;
  --color-gold-light:   #DEB840;
  --color-gold-dark:    #9A7010;
  --color-raw-silk-dark:#E4D8C0;
  --color-charcoal-mid: #3A3010;

  /* ─── Semantic Color Tokens ──────────────────────────────────────────── */

  /* Backgrounds */
  --bg-primary:         var(--color-raw-silk);
  --bg-dark:            var(--color-charcoal);
  --bg-olive:           var(--color-olive);
  --bg-surface:         #FAF6EE;         /* slightly lighter than raw silk for cards */
  --bg-surface-raised:  #FFFFFF;
  --bg-overlay:         rgba(26, 22, 8, 0.48);

  /* Foreground / text */
  --fg-primary:         var(--color-charcoal);
  --fg-secondary:       #3A3010;
  --fg-tertiary:        #6A6030;
  --fg-muted:           #9A9070;
  --fg-on-dark:         var(--color-raw-silk);
  --fg-on-olive:        var(--color-raw-silk);
  --fg-link:            var(--color-olive);
  --fg-accent:          var(--color-peach);
  --fg-emphasis:        var(--color-gold);

  /* Brand */
  --brand-primary:      var(--color-olive);
  --brand-secondary:    var(--color-spring);
  --brand-accent:       var(--color-peach);
  --brand-emphasis:     var(--color-gold);

  /* States */
  --state-hover-bg:     rgba(94, 107, 34, 0.08);
  --state-active-bg:    rgba(94, 107, 34, 0.16);
  --state-focus-ring:   rgba(94, 107, 34, 0.40);
  --state-disabled-fg:  #B0A880;
  --state-disabled-bg:  #EDE8D8;

  /* Borders */
  --border-light:       rgba(94, 107, 34, 0.18);
  --border-medium:      rgba(94, 107, 34, 0.32);
  --border-strong:      rgba(94, 107, 34, 0.60);
  --border-dark:        rgba(26, 22, 8, 0.20);

  /* Opacity scale — consolidated alpha ladders (mirrors canonical handoff).
     Olive 0.08/0.18/0.32 reuse state/border tokens; 0.05 is the faint tint.
     Cream-on-dark 0.78 is the a11y-vetted on-dark body value. */
  --olive-tint:          rgba(94, 107, 34, 0.05);
  --olive-hairline:      rgba(94, 107, 34, 0.08);
  --olive-border:        rgba(94, 107, 34, 0.18);
  --olive-border-strong: rgba(94, 107, 34, 0.32);
  --on-dark-hairline:    rgba(242, 234, 216, 0.06);
  --on-dark-line:        rgba(242, 234, 216, 0.14);
  --on-dark-secondary:   rgba(242, 234, 216, 0.45);
  --on-dark-body:        rgba(242, 234, 216, 0.78);

  /* Status / Feedback */
  --status-success:     var(--color-spring);
  --status-warning:     var(--color-gold);
  --status-error:       #C04040;
  --status-info:        var(--color-olive);
  --status-uncertainty: var(--color-peach);  /* structured uncertainty state */

  /* ─── Typography Tokens ──────────────────────────────────────────────── */

  /* Font families */
  --font-display:       'EB Garamond', Georgia, serif;
  --font-ui:            'Space Grotesk', system-ui, sans-serif;

  /* Font weights */
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;

  /* Type scale */
  --text-2xs:           0.6875rem;  /* 11px — small apparatus: eyebrow/kicker, caption, strapline */
  --text-xs:            0.75rem;    /* 12px */
  --text-sm:            0.875rem;   /* 14px */
  --text-base:          1rem;       /* 16px */
  --text-lg:            1.125rem;   /* 18px */
  --text-xl:            1.25rem;    /* 20px */
  --text-2xl:           1.5rem;     /* 24px */
  --text-3xl:           1.875rem;   /* 30px */
  --text-4xl:           2.25rem;    /* 36px */
  --text-5xl:           3rem;       /* 48px */
  --text-6xl:           3.75rem;    /* 60px */
  --text-7xl:           4.5rem;     /* 72px */

  /* Line heights */
  --leading-tight:      1.15;
  --leading-snug:       1.3;
  --leading-normal:     1.5;
  --leading-relaxed:    1.65;
  --leading-loose:      1.8;

  /* Letter spacing */
  --tracking-tight:     -0.02em;
  --tracking-snug:      -0.01em;  /* display-heading micro-tightening */
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  /* ─── Spacing Tokens ─────────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ─── Interaction ────────────────────────────────────────────────────── */
  /* Minimum touch-target edge on phones (WCAG 2.5.5). Single source of
     truth — consumed by the one consolidated tap-target rule in
     components.css. New interactive controls inherit it by being added to
     that rule's selector list, never by re-declaring a min-height. */
  --tap-min: 44px;

  /* ─── Corner Radius ──────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows & Elevation ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(26, 22, 8, 0.10), 0 1px 2px rgba(26, 22, 8, 0.06);
  --shadow-md:   0 4px 8px rgba(26, 22, 8, 0.10), 0 2px 4px rgba(26, 22, 8, 0.06);
  --shadow-lg:   0 10px 24px rgba(26, 22, 8, 0.12), 0 4px 8px rgba(26, 22, 8, 0.06);
  --shadow-xl:   0 20px 40px rgba(26, 22, 8, 0.15), 0 8px 16px rgba(26, 22, 8, 0.08);

  /* ─── Animation ──────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --duration-slow:   380ms;
}

/* ─── Site extension tokens ─────────────────────────────────────────────────
 * Off-palette literals lifted verbatim from css/styles.css so the canonical
 * file remains the living source of truth for every colour the site ships.
 * Values equal the literals already in use — defining them here is inert
 * until call sites are migrated in a later pass (no visual change now).
 * #FAF6EE is already --bg-surface; #C07850 is already --color-peach-dark.
 * ------------------------------------------------------------------------- */
:root {
  --bg-surface-2:        #F4EDE0;  /* profile-circle ground, lighter than --bg-surface */
  --bg-peach-whisper:    #F1E7D8;  /* cardless closing-block warm wash */
  --color-tonal-silk:    #EFE6D2;  /* alternating section ground (legacy --tonal-silk) */
  --color-olive-deep:    #4A551B;  /* deep olive — .reason copy */
  --color-olive-pressed: #4A5419;  /* olive button hover/pressed */
  --color-olive-darkest: #3F4815;  /* olive badge text */
  --color-gold-deep:     #6B4F10;  /* gold badge text */
  --color-peach-deep:    #7A3E1F;  /* peach badge text */
  --color-slate:         #345566;  /* slate/ocean badge */
  --color-soil:          #A0582A;  /* soil-brown SVG fill */
  --color-mid:           #8A8270;  /* muted text (legacy --mid) */

  /* Audit 06/§07 — ILLUSTRATION-ONLY semantic tokens.
     Two colours that live inside the picture and never outside it.
     ALLOWED: SVG fill/stroke depicting soil profiles, slopes, aquifers,
     water bodies, hydrology. FORBIDDEN: UI surfaces — no buttons, pills,
     text, borders, or section backgrounds. */
  --ill-soil:            var(--color-soil);   /* #A0582A — earth/soil profiles */
  --ill-water:           #5B8FB0;             /* aquifer/water bodies */
  --ill-water-light:     #7BA7BC;             /* shallow water / highlight */
}