/* Design tokens. The direction: docs/prototypes/README.md (B6 with a forest-green menu).
   Every color is OKLCH with its dark counterpart through light-dark(); components only use var(--color-*). */
@layer base {
  :root {
    color-scheme: light dark;

    /* Brand */
    --lch-brand-red: 56.1% 0.212 25;
    --lch-brand-green: 56.4% 0.145 146;

    /* Surfaces and ink */
    --color-canvas: light-dark(oklch(96.6% 0.003 248), oklch(20.7% 0.006 237));
    --color-surface: light-dark(oklch(100% 0 0), oklch(24.4% 0.009 234));
    --color-surface-raised: light-dark(oklch(98% 0.002 165), oklch(27.3% 0.011 237));
    --color-zebra: light-dark(oklch(98.7% 0.002 146), oklch(26% 0.011 237));
    --color-chip: light-dark(oklch(95.4% 0.006 154), oklch(29.2% 0.012 233));
    --color-line: light-dark(oklch(93.8% 0.008 152), oklch(31.2% 0.015 240));
    --color-line-strong: light-dark(oklch(85.9% 0.011 159), oklch(37.7% 0.017 241));
    --color-ink: light-dark(oklch(25.3% 0.017 163), oklch(94.1% 0.007 160));
    --color-ink-muted: light-dark(oklch(46.5% 0.025 162), oklch(76.1% 0.018 159));

    /* Action accent: the brand green. Red is for danger and "à traiter" only. */
    --color-accent: light-dark(oklch(56.4% 0.145 146), oklch(73.1% 0.157 147));
    --color-accent-ink: light-dark(oklch(100% 0 0), oklch(15% 0.02 150));
    --color-accent-hover: color-mix(in oklab, var(--color-accent), black 10%);
    --color-danger: light-dark(oklch(56.1% 0.212 25), oklch(68.3% 0.171 19));
    --color-danger-ink: light-dark(oklch(46.2% 0.178 26), oklch(84% 0.089 15));
    --color-danger-soft: light-dark(oklch(94.5% 0.022 11), oklch(29.3% 0.073 18));
    --color-link: var(--color-accent);

    /* Sidebar, always dark green */
    --color-side: light-dark(oklch(32% 0.05 152), oklch(22.1% 0.031 153));
    --color-side-ink: oklch(90.8% 0.016 154);
    --color-side-muted: oklch(75% 0.036 155);
    --color-side-on: oklch(42.7% 0.072 151);
    --color-side-on-ink: oklch(100% 0 0);
    --color-logo-red: oklch(76.3% 0.142 17);
    --color-logo-green: oklch(84.2% 0.133 138);

    /* Sections of the menu and the top band of blocks */
    --color-section-requests: oklch(73.1% 0.157 147);
    --color-section-invoices: oklch(80.2% 0.151 79);
    --color-section-services: oklch(71% 0.119 244);
    --color-section-rfc: oklch(70.9% 0.159 294);
    --color-section-reference: oklch(75% 0.036 155);

    /* Workflow states */
    --color-state-created: light-dark(oklch(56.1% 0.212 25), oklch(68.3% 0.171 19));
    --color-state-submitted: light-dark(oklch(75.6% 0.148 81), oklch(80.2% 0.151 79));
    --color-state-buyer: light-dark(oklch(55.9% 0.163 294), oklch(70.9% 0.159 294));
    --color-state-treasury: light-dark(oklch(58.9% 0.147 252), oklch(71% 0.119 244));
    --color-state-supplier: light-dark(oklch(60% 0.11 195), oklch(74% 0.11 195));
    --color-state-done: light-dark(oklch(56.4% 0.145 146), oklch(73.1% 0.157 147));
    --color-state-refused: light-dark(oklch(75% 0.036 155), oklch(62% 0.019 159));
    --color-state-off: light-dark(oklch(90% 0.01 250), oklch(35% 0.015 240));

    /* Notification kinds (dashboard, top bar) */
    --color-notif-to-do: var(--color-state-created);
    --color-notif-waiting: var(--color-state-buyer);
    --color-notif-running: var(--color-state-treasury);
    --color-notif-done: var(--color-state-done);
    --color-notif-refused: var(--color-state-refused);
    --color-notif-comment: var(--color-state-submitted);

    /* Type, spacing, radii, shadows, motion */
    --font-sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.625rem;
    --inline-space: 1ch;
    --inline-space-s: 0.5ch;
    --inline-space-l: 2ch;
    --block-space: 1rem;
    --block-space-s: 0.5rem;
    --block-space-l: 1.5rem;
    --block-space-xl: 2rem;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-block: light-dark(0 1px 2px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.3)), light-dark(0 4px 14px oklch(0% 0 0 / 0.05), 0 6px 18px oklch(0% 0 0 / 0.25));
    --duration: 150ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --sidebar-width: 15rem;
    --topbar-height: 4rem;
    --form-max: 72rem;
  }
}