/*
 * Design tokens. Source: docs/design/organic.css (Organic design system) with the Capstone Hub
 * overrides from docs/design/README.md "Design tokens": Figtree 700 headings, interactive blue,
 * error/warning ramps, category petal colors. The colors a theme sets (Admin → General) are those of
 * the default theme, Sunshine (Theme::DEFAULT_TOKENS; docs/PHASE2.md §20).
 * Figtree 400/600/700 is loaded by a Google Fonts <link> in shared/_head.html.erb.
 */
@layer tokens {
  :root {
    /* Ground (Sunshine) */
    --color-bg: #fdfaf0;
    --color-surface: #f4ecd2;
    --color-text: #1f1c12;
    --color-accent: #c67139;
    --color-accent-2: #7a8a5e;
    --color-divider: color-mix(in srgb, #1f1c12 16%, transparent);

    --color-neutral-100: #fefdf8;
    --color-neutral-200: #f0ede3;
    --color-neutral-300: #dedbd1;
    --color-neutral-400: #c1beb4;
    --color-neutral-500: #a4a197;
    --color-neutral-600: #8a877d;
    --color-neutral-700: #6e6b61;
    --color-neutral-800: #545147;
    --color-neutral-900: #3e3b31;

    --color-accent-100: #fff2eb;
    --color-accent-200: #ffe1d0;
    --color-accent-300: #ffc6a5;
    --color-accent-400: #f6a06b;
    --color-accent-500: #d67f48;
    --color-accent-600: #b2622d;
    --color-accent-700: #8c491a;
    --color-accent-800: #643312;
    --color-accent-900: #402310;

    --color-accent-2-100: #f0fae1;
    --color-accent-2-200: #e1eecc;
    --color-accent-2-300: #ccdbb2;
    --color-accent-2-400: #aebf92;
    --color-accent-2-500: #8fa073;
    --color-accent-2-600: #728157;
    --color-accent-2-700: #56633f;
    --color-accent-2-800: #3d472b;
    --color-accent-2-900: #272e1b;

    /* Hub additions */
    --color-primary: #3b8fd6;
    --color-primary-hover: #3684c5;
    /* Text on the primary color (Admin → General picks black, white or the text color for a theme). */
    --color-on-primary: var(--color-text);
    --color-blue: #1d6aa1;
    --color-blue-deep: #1a5d8e;
    --color-blue-soft: #dfeaf2;
    --color-err: #b5402c;
    --color-err-text: #8a2a1d;
    --color-err-soft: #fae3dc;
    --color-err-border: #e9b4a8;
    --color-warn: #a77514;
    --color-warn-text: #6e4f0a;
    --color-warn-soft: #f8ecc9;

    /* Hairlines and outlines */
    --color-hairline: color-mix(in srgb, var(--color-text) 9%, transparent);
    --color-input-border: color-mix(in srgb, var(--color-text) 16%, transparent);
    --color-btn-border: color-mix(in srgb, var(--color-text) 22%, transparent);
    --color-btn-hover: color-mix(in srgb, var(--color-text) 6%, transparent);
    --color-on-rail-hover: color-mix(in srgb, var(--color-rail-contrast) 9%, transparent);

    /* The side rail, the phone tab bar and the sign-in panel. A theme (Admin → General, Theme) sets
       them from its rail color; the default theme, Sunshine, has a light yellow rail. */
    --color-rail: #f6d469;
    --color-rail-text: #463d22;
    --color-rail-text-bright: #302b19;
    --color-rail-muted: #64572e;
    --color-rail-strong: #d8ba5d;
    /* What stands out most on the rail (titles, the tab bar's current tab): the page color on a dark
       rail, the text color on a light one. */
    --color-rail-contrast: var(--color-text);
    /* The active item's pill on every rail: the page color, and the text on it. */
    --color-rail-active: var(--color-bg);
    --color-rail-active-text: var(--color-text);

    /* Category petals (README "Category petals") */
    --petal-policy-bg: #dcedfa;
    --petal-policy-fg: #145d91;
    --petal-ops-bg: #d5f2e2;
    --petal-ops-fg: #166a3e;
    --petal-lic-bg: #ffe5cf;
    --petal-lic-fg: #8c4508;
    --petal-staff-bg: #fbe0ec;
    --petal-staff-fg: #8f2857;
    --petal-form-bg: #f7e9c2;
    --petal-form-fg: #6b500a;

    /* Type */
    --font-heading: "Figtree", system-ui, sans-serif;
    --font-heading-weight: 700;
    --font-body: "Figtree", system-ui, sans-serif;
    --font-mono: ui-monospace, Menlo, monospace;

    /* Organic spacing scale (density 1.10x) */
    --space-1: 4.4px;
    --space-2: 8.8px;
    --space-3: 13.2px;
    --space-4: 17.6px;
    --space-6: 26.4px;
    --space-8: 35.2px;

    /* Radius: pills, dialogs/hero, cards/rail/tab bar, rows/notices/photos, stat tiles, thumbnails */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --radius-dialog: 32px;
    --radius-card: 28px;
    --radius-row: 22px;
    --radius-tile: 16px;
    --radius-thumb: 12px;

    /* Elevation */
    --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
    --shadow-sheet: 0 -8px 24px rgb(46 43 37 / 8%);
    --ring: 0 0 0 2px var(--color-blue);
    --scrim: color-mix(in srgb, color-mix(in srgb, var(--color-neutral-900) 62%, var(--color-bg)) 92%, transparent);

    /* Motion: short and calm, never in the way. Hover and press states use --motion-fast; menus,
       dialogs and page changes --motion-base. prefers-reduced-motion turns it all off (base.css). */
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Shell */
    --rail-width: 236px;
    --rail-width-collapsed: 76px;
    --banner-height: 58px;
    --main-padding: 16px 28px 32px 44px;
    /* Caps on the content column (padding included) for wide screens; layout/shell.css. */
    --main-width-wide: 1560px;
    --main-width-reading: 1280px;
  }
}