/* ==========================================================================
   Yonja.ai design tokens
   Transcribed from brand board 1, sections 5-9. Hex values are exactly as
   printed on the board.

   :root carries the dark theme (the brand's default surface). Add
   [data-theme="light"] to any ancestor to flip to the light palette.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --yonja-yellow: #FFD34D;          /* primary brand yellow */
  --yonja-yellow-deep: #FFB800;     /* gradient end / pressed state */

  /* --- Dark mode palette (board 1 section 5) ---------------------------- */
  --yonja-deep-black: #0B0B0D;
  --yonja-charcoal: #141418;
  --yonja-slate: #1F1F23;
  --yonja-graphite: #2A2A31;

  /* --- Light mode palette (board 1 section 6) --------------------------- */
  --yonja-cream: #FFF7E6;
  --yonja-light-ivory: #FFF3D6;
  --yonja-parchment: #F7F0E1;
  --yonja-warm-white: #FFFFFF;

  /* --- Accent colours (board 1 section 7) ------------------------------- */
  --yonja-blush: #F5C9D6;
  --yonja-sage: #C9D8B6;
  --yonja-sky: #C7D8EA;
  --yonja-lavender: #D9D0F0;
  --yonja-peach: #F6D7B0;

  /* --- Gradients (board 1 section 8) ------------------------------------ */
  --yonja-gradient-gold: linear-gradient(180deg, #FFD34D 0%, #FFB800 100%);
  --yonja-gradient-cream: linear-gradient(180deg, #FFF7E6 0%, #FFE7A6 100%);
  --yonja-gradient-bloom: linear-gradient(180deg, #F5C9D6 0%, #D9D0F0 100%);
  --yonja-gradient-mist: linear-gradient(180deg, #C9D8B6 0%, #C7D8EA 100%);

  /* --- Colour tokens, UI system (board 1 section 9) --------------------- */
  /* The board specifies these against the dark UI; the light theme below
     mirrors the same roles onto the light palette. */
  --yonja-bg-primary: #0B0B0D;
  --yonja-bg-secondary: #141418;
  --yonja-surface-1: #1F1F23;
  --yonja-surface-2: #2A2A31;
  --yonja-text-primary: #FFF7E6;
  --yonja-text-secondary: #C6BBAA;
  --yonja-text-muted: #A1A1AA;

  /* --- Derived UI values ------------------------------------------------ */
  --yonja-border: rgba(255, 247, 230, 0.12);
  --yonja-border-strong: rgba(255, 247, 230, 0.22);
  --yonja-focus-ring: rgba(255, 211, 77, 0.28);
  --yonja-on-yellow: #0B0B0D;       /* text/icons sitting on brand yellow */

  /* Error. The board prints no error colour, so this is derived: a warm red
     held close to the palette's temperature rather than a system red, which
     reads as a browser alert dropped onto the brand. Defined per theme —
     no single red clears 4.5:1 on both #0B0B0D and #FFF7E6.
     Measured: 7.03:1 on --yonja-bg-primary (dark). */
  --yonja-error: #FF6B5A;

  /* Gold as TEXT. The brand yellow is an ink for large marks and fills, not
     for type: #FFD34D on cream measures 1.34:1 at any size, and #FFB800 is
     1.63:1 — both invisible. This token keeps a gold accent available to
     small type by darkening it per theme. Measured on --yonja-bg-primary:
     13.74:1 dark, 7.25:1 light. Use it for accent type; never use
     --yonja-yellow on a light surface for text. */
  --yonja-gold-ink: #FFD34D;

  /* The mark's ink and halo, per theme. These exist as TOKENS rather than as
     theme-scoped component rules because custom properties resolve from the
     nearest ancestor that sets them, so a light panel inside a dark page (or
     the reverse) gets the right ink automatically. A descendant selector like
     [data-theme="light"] .mark cannot express "nearest" and silently loses to
     whichever rule sits later in the file. */
  --yonja-mark-ink: #FFD34D;
  --yonja-mark-glow: rgba(255, 211, 77, 0.34);

  /* --- Radii ------------------------------------------------------------ */
  --yonja-radius-sm: 8px;
  --yonja-radius-md: 14px;          /* buttons, inputs */
  --yonja-radius-lg: 20px;          /* cards */
  --yonja-radius-xl: 28px;          /* hero panels */
  --yonja-radius-pill: 999px;       /* chips, badges */
  --yonja-radius-icon: 22%;         /* app icon corner radius */

  /* --- Spacing ---------------------------------------------------------- */
  --yonja-space-1: 4px;
  --yonja-space-2: 8px;
  --yonja-space-3: 12px;
  --yonja-space-4: 16px;
  --yonja-space-5: 24px;
  --yonja-space-6: 32px;
  --yonja-space-7: 48px;
  --yonja-space-8: 64px;

  /* --- Typography ------------------------------------------------------- */
  /* One type direction brand-wide — founder decision, NOTES.md section 12.1.
     The serif is retired with no editorial exception. --yonja-font-display is
     kept as an alias so existing consumers keep resolving, and now points at
     the same family. */
  --yonja-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui,
    "Segoe UI", sans-serif;
  --yonja-font-display: var(--yonja-font-sans);

  /* Retired. Retained for one purpose only: hero-mockup/ pins this locally so
     it stays a faithful reproduction of the printed boards. Never use it on a
     new surface. */
  --yonja-font-serif-legacy: "Playfair Display", "Lora", Georgia,
    "Times New Roman", serif;

  --yonja-text-display: 56px;
  --yonja-text-h1: 40px;
  --yonja-text-h2: 30px;
  --yonja-text-h3: 22px;
  --yonja-text-body-lg: 18px;
  --yonja-text-body: 16px;
  --yonja-text-sm: 14px;
  --yonja-text-xs: 12px;

  --yonja-leading-tight: 1.15;
  --yonja-leading-snug: 1.35;
  --yonja-leading-normal: 1.6;
  --yonja-tracking-caps: 0.14em;

  /* --- Elevation -------------------------------------------------------- */
  --yonja-shadow-card: 0 18px 44px rgba(0, 0, 0, 0.45);
  --yonja-shadow-glow: 0 10px 40px rgba(255, 211, 77, 0.22);

  /* --- Logo construction (board 2 sections 1-2) ------------------------- */
  --yonja-logo-aspect: 1.0965;      /* mark width / height */
  --yonja-logo-clear-space: 0.086;  /* inner gap "x" as a fraction of width */
  --yonja-logo-min-digital: 24px;
  --yonja-logo-min-print: 16mm;
}

/* The dark values live in :root, which makes them the default but NOT
   re-assertable. A [data-theme="dark"] panel nested inside a light page had
   nothing to restore it and silently rendered cream — the "Dark mode"
   specimen panels in ui-kit/ do exactly that once the page is toggled to
   light. This block restates them so the two themes nest in both directions.
   Values identical to :root; this adds no new colour. */
[data-theme="dark"] {
  --yonja-bg-primary: #0B0B0D;
  --yonja-bg-secondary: #141418;
  --yonja-surface-1: #1F1F23;
  --yonja-surface-2: #2A2A31;
  --yonja-text-primary: #FFF7E6;
  --yonja-text-secondary: #C6BBAA;
  --yonja-text-muted: #A1A1AA;

  --yonja-border: rgba(255, 247, 230, 0.12);
  --yonja-border-strong: rgba(255, 247, 230, 0.22);
  --yonja-error: #FF6B5A;
  --yonja-gold-ink: #FFD34D;
  --yonja-mark-ink: #FFD34D;
  --yonja-mark-glow: rgba(255, 211, 77, 0.34);
  --yonja-shadow-card: 0 18px 44px rgba(0, 0, 0, 0.45);
  --yonja-shadow-glow: 0 10px 40px rgba(255, 211, 77, 0.22);
}

[data-theme="light"] {
  --yonja-bg-primary: #FFF7E6;
  --yonja-bg-secondary: #FFF3D6;
  --yonja-surface-1: #F7F0E1;
  --yonja-surface-2: #FFFFFF;
  --yonja-text-primary: #0B0B0D;
  --yonja-text-secondary: #4A453D;
  --yonja-text-muted: #8A8378;

  --yonja-border: rgba(11, 11, 13, 0.12);
  --yonja-border-strong: rgba(11, 11, 13, 0.22);
  --yonja-error: #C2321F;           /* 5.22:1 on --yonja-bg-primary (light) */
  --yonja-gold-ink: #6B4E00;        /* 7.25:1 on --yonja-bg-primary (light) */
  /* Deep black, not yellow: the mark reports state on this surface and no
     yellow in the palette clears 3:1 on cream. guidelines.md section 4. */
  --yonja-mark-ink: #0B0B0D;
  --yonja-mark-glow: rgba(255, 184, 0, 0.26);
  --yonja-shadow-card: 0 18px 44px rgba(90, 74, 40, 0.12);
  --yonja-shadow-glow: 0 10px 40px rgba(255, 184, 0, 0.18);
}