/* Kiwi design tokens for the website. Values mirror design/design-system.json; change both together.
   Page CSS uses only these variables, never raw colors (checked by test/design_system_test.py).

   [User decision 2026-10-30] Every product website follows the device's light/dark appearance
   (color-scheme: light dark plus prefers-color-scheme) — "ja"; reason not stated.
   Regression check: test_userDecision_websiteFollowsDeviceAppearance

   [User decision 2026-10-30] In light mode Kiwi uses the darker green #387608 as its accent so text and
   tints reach at least 4.5:1 on white; dark mode stays #9AF44B — "ok"; reason not stated.
   Regression check: test_userDecision_lightAccentMeetsTextContrast */
:root {
  color-scheme: light dark;

  --color-accent: #387608;            /* text and links on canvas (5.0:1) */
  --color-accent-fill: #387608;       /* = AccentColor asset; fills with --color-accent-on on top */
  --color-accent-on: #FFFFFF;         /* text on accent fills (5.6:1) */
  --color-text-primary: #3a2c18;
  --color-text-secondary: #6b5a40;
  --color-surface-canvas: #F5F4E6;
  --color-surface-raised: #FCF8EC;
  --color-border-subtle: #e3decb;

  --color-kiwi-accent-bright: #9AF44B;  /* accent on the deep-green band, both modes */
  --color-kiwi-on-bright: #0a1500;      /* text on bright-green buttons, both modes */
  --color-kiwi-text-strong: #2a1f10;    /* headings */
  --color-kiwi-earth: #46341E;          /* quotes and "limited" marks */
  --color-kiwi-highlight-start: #eaf6dc;/* Kiwi's own card and table column */
  --color-kiwi-highlight-end: #dff0c8;
  --color-kiwi-highlight-border: #c4e3a0;
  --color-kiwi-hero-sun: #ffe6a8;
  --color-kiwi-hero-leaf: #cfeebb;
  --color-kiwi-hero-top: #fbf6e4;
  --color-kiwi-band-start: #1f4310;     /* honesty band, deep kiwi green in both modes */
  --color-kiwi-band-end: #0a1500;
  --color-kiwi-band-text: #eaf0e2;
  --color-kiwi-band-heading: #fff;
  --color-kiwi-band-muted: #d4ddca;
  --color-kiwi-band-surface: rgba(255,255,255,.05);
  --color-kiwi-band-border: rgba(255,255,255,.12);
  --color-kiwi-shadow: rgba(70,52,30,.45);
  --color-kiwi-shadow-soft: rgba(70,52,30,.4);
  --kiwi-select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%233a2c18'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.5%202%206%206.5%2010.5%202'/%3E%3C/svg%3E");

  --radius-field: 16px;
  --radius-card: 22px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --elevation-raised: 0 6px 22px -12px var(--color-kiwi-shadow-soft);
  --elevation-overlay: 0 18px 50px -22px var(--color-kiwi-shadow);
  --motion-quick: 140ms;
  --motion-standard: 200ms;
  --motion-reveal: 600ms;
  --font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", "Nunito", system-ui, sans-serif;

  /* Legacy page aliases; new CSS uses the semantic names above. */
  --cream: var(--color-surface-canvas);
  --cream-raised: var(--color-surface-raised);
  --ink: var(--color-text-primary);
  --ink-strong: var(--color-kiwi-text-strong);
  --ink-soft: var(--color-text-secondary);
  --green: var(--color-accent-fill);
  --green-deep: var(--color-accent);
  --green-bright: var(--color-kiwi-accent-bright);
  --brown: var(--color-kiwi-earth);
  --on-green: var(--color-accent-on);
  --band-1: var(--color-kiwi-band-start);
  --band-2: var(--color-kiwi-band-end);
  --hairline: var(--color-border-subtle);
  --shadow: var(--elevation-overlay);
  --shadow-sm: var(--elevation-raised);
  --radius: var(--radius-card);
  --font: var(--font-family);
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent: #9AF44B;
    --color-accent-fill: #9AF44B;
    --color-accent-on: #08110A;
    --color-text-primary: #E2EADF;
    --color-text-secondary: #B8C5BA;
    --color-surface-canvas: #0D1710;
    --color-surface-raised: #121C15;
    --color-border-subtle: #314137;

    --color-kiwi-text-strong: #F4F8EF;
    --color-kiwi-earth: #D9C9A8;
    --color-kiwi-highlight-start: #17281A;
    --color-kiwi-highlight-end: #1B3320;
    --color-kiwi-highlight-border: #2E4A2A;
    --color-kiwi-hero-sun: #2A2A14;
    --color-kiwi-hero-leaf: #16301A;
    --color-kiwi-hero-top: #101B12;
    --color-kiwi-shadow: rgba(0,0,0,.6);
    --color-kiwi-shadow-soft: rgba(0,0,0,.5);
    --kiwi-select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%23E2EADF'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1.5%202%206%206.5%2010.5%202'/%3E%3C/svg%3E");
  }
}