/* DrawSort landing: the token layer (#66 S2). Every value in :root is brand/design-tokens.json
   (palette A, chosen 2026-10-04); tests/surfaces/test_landing_copy.py pins them equal, and
   no other landing stylesheet may carry a raw hex. The site's ground is cool-white paper;
   the app's is navy (Brand Guide section 4.6). No gradients, ever.
   #66 S8d: the dark set below follows the system setting through prefers-color-scheme.
   There is no toggle; the data-theme block is ready for one. Pinned by
   tests/surfaces/test_landing_dark_mode.py.
   The one block that is not palette A is the generated one at the end: the firm app's own
   dark-theme tokens, scoped to the hero picture (.lp-app), where the page shows the app as
   it is in both page themes (#66 S8b). */
:root {
    color-scheme: light;

    /* paper and ink */
    --paper-100: #F6F8FB;   /* the page */
    --paper-50: #FFFFFF;    /* a sheet on the table: cards, title blocks, inputs */
    --paper-200: #EAEFF5;   /* recess: code and data blocks, hover wells */
    --ink-900: #0F172A;     /* primary text, heavy rules, the one band per page */
    --ink-700: #334155;     /* secondary text */
    --ink-500: #56657A;     /* labels and meta */
    --ink-400: #7C8BA1;     /* control rule: a boundary a person must see */
    --ink-300: #D5DCE6;     /* hairline: dividers, card borders */
    --navy-950: #0B1220;    /* the ink footer */

    /* the one accent and the redline */
    --blue-600: #2563EB;    /* primary buttons, links, focus */
    --blue-700: #1D4ED8;    /* hover */
    --blue-800: #1E40AF;    /* active */
    --blue-400: #60A5FA;    /* links on ink */
    --blue-50: #EFF6FF;     /* selected row, info fill */
    --link: var(--blue-600);        /* link text: the primary fill on paper, blue-400 on ink */
    --link-hover: var(--blue-700);
    --focus-ring: var(--blue-600);
    --on-primary: var(--paper-50);  /* text on a primary fill, white in both themes */
    --redline-500: #E3A92A; /* marker fill only, never text, never a thin line */
    --redline-700: #8A5A00; /* redline text on paper */
    --redline-50: #FEF8E8;  /* missing-sheet wash */

    /* the band and what sits on it */
    --band: var(--ink-900);
    --on-band: #F1F5F9;
    --on-band-muted: #B7C3D4;
    --band-rule: #1F2A3F;

    /* the faint non-photo-blue construction grid, hero only (minor #E8EEF5, major #D2DDEA) */
    --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='%23E8EEF5' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='%23D2DDEA' fill='none'/%3E%3C/svg%3E");
    --band-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='rgba(241,245,249,.08)' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='rgba(241,245,249,.16)' fill='none'/%3E%3C/svg%3E");

    /* type: IBM Plex Sans and Mono, self-hosted when the files ship (decision g); the
       stacks below are the Brand Guide's and hold the layout until then */
    --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

    /* geometry: a 4px base, 4px radii, 1px and 2px rules, no elevation */
    --radius: 4px;
    --rule-hair: 1px solid var(--ink-300);
    --rule-control: 1px solid var(--ink-400);
    --rule-heavy: 2px solid var(--ink-900);
    --max-width: 1120px;
    --gutter: 24px;
    --nav-height: 64px;
    --fast: 120ms;
    --base: 180ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* DARK: the system setting, unless a page ever states light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* ink mode: brand/design-tokens.json semantic.ink and the navy ramp, the firm app's
           dark theme (firm/src/theme.css :root). The names stay the light ones; the value
           is what that role takes on the ink ground. */
        --paper-100: #0B1220;   /* the page: ink bg, navy-950 */
        --paper-50: #101A2E;    /* cards, nav, inputs: ink surface, navy-900 */
        --paper-200: #1F2A3F;   /* recess: navy-800 */
        --ink-900: #F1F5F9;     /* primary text: ink text */
        --ink-700: #B7C3D4;     /* secondary text: ink text-2 */
        --ink-500: #8294AB;     /* labels and meta: ink text-3 */
        --ink-400: #5A6C86;     /* control rule: ink rule-strong */
        --ink-300: #1F2A3F;     /* hairline: ink rule */
        --navy-950: #0B1220;    /* the ink footer, unchanged */

        --blue-600: #2563EB;    /* primary fill, unchanged */
        --blue-700: #1D4ED8;
        --blue-800: #1E40AF;
        --blue-400: #60A5FA;
        --blue-50: #172554;     /* selected row, info fill: ink selected-bg */
        --link: #60A5FA;        /* ink link: blue-600 text fails AA on the ink ground */
        --link-hover: #93C5FD;
        --focus-ring: #60A5FA;
        --on-primary: #FFFFFF;
        --redline-500: #E3A92A;
        --redline-700: #E3A92A; /* redline text on ink */
        --redline-50: rgba(227,169,42,0.14); /* ink redline wash */

        /* the band is navy-900 on the navy-950 page; the page's ink is light here */
        --band: #101A2E;
        --on-band: #F1F5F9;
        --on-band-muted: #B7C3D4;
        --band-rule: #1F2A3F;

        /* the hero grid on ink is the band's grid */
        --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='rgba(241,245,249,.08)' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='rgba(241,245,249,.16)' fill='none'/%3E%3C/svg%3E");
        --band-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='rgba(241,245,249,.08)' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='rgba(241,245,249,.16)' fill='none'/%3E%3C/svg%3E");

        --rule-hair: 1px solid var(--ink-300);
        --rule-control: 1px solid var(--ink-400);
        --rule-heavy: 2px solid #2D3D59; /* ink rule-heavy: a 2px light line would shout */
    }
}

/* The same set on the attribute the firm app uses, so a later toggle needs no CSS.
   test_every_light_token_has_a_dark_value keeps the two blocks equal. */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* ink mode: brand/design-tokens.json semantic.ink and the navy ramp, the firm app's
       dark theme (firm/src/theme.css :root). The names stay the light ones; the value
       is what that role takes on the ink ground. */
    --paper-100: #0B1220;   /* the page: ink bg, navy-950 */
    --paper-50: #101A2E;    /* cards, nav, inputs: ink surface, navy-900 */
    --paper-200: #1F2A3F;   /* recess: navy-800 */
    --ink-900: #F1F5F9;     /* primary text: ink text */
    --ink-700: #B7C3D4;     /* secondary text: ink text-2 */
    --ink-500: #8294AB;     /* labels and meta: ink text-3 */
    --ink-400: #5A6C86;     /* control rule: ink rule-strong */
    --ink-300: #1F2A3F;     /* hairline: ink rule */
    --navy-950: #0B1220;    /* the ink footer, unchanged */

    --blue-600: #2563EB;    /* primary fill, unchanged */
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-400: #60A5FA;
    --blue-50: #172554;     /* selected row, info fill: ink selected-bg */
    --link: #60A5FA;        /* ink link: blue-600 text fails AA on the ink ground */
    --link-hover: #93C5FD;
    --focus-ring: #60A5FA;
    --on-primary: #FFFFFF;
    --redline-500: #E3A92A;
    --redline-700: #E3A92A; /* redline text on ink */
    --redline-50: rgba(227,169,42,0.14); /* ink redline wash */

    /* the band is navy-900 on the navy-950 page; the page's ink is light here */
    --band: #101A2E;
    --on-band: #F1F5F9;
    --on-band-muted: #B7C3D4;
    --band-rule: #1F2A3F;

    /* the hero grid on ink is the band's grid */
    --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='rgba(241,245,249,.08)' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='rgba(241,245,249,.16)' fill='none'/%3E%3C/svg%3E");
    --band-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24.5 0V120M48.5 0V120M72.5 0V120M96.5 0V120M0 24.5H120M0 48.5H120M0 72.5H120M0 96.5H120' stroke='rgba(241,245,249,.08)' fill='none'/%3E%3Cpath d='M.5 0V120M0 .5H120' stroke='rgba(241,245,249,.16)' fill='none'/%3E%3C/svg%3E");

    --rule-hair: 1px solid var(--ink-300);
    --rule-control: 1px solid var(--ink-400);
    --rule-heavy: 2px solid #2D3D59; /* ink rule-heavy: a 2px light line would shout */
}

/* GENERATED BEGIN (#66 Landing v2 S8b): the firm app's own dark-theme tokens, scoped to the
   hero picture (.lp-app), which shows the app as it is in both page modes. Written by
   firm/src/landing/landing-hero.test.tsx from the app's theme; never edited by hand. */
.lp-app {
    --card: #101a2e;
    --border: #1f2a3f;
    --text-2: #b7c3d4;
    --text-3: #8294ab;
    --blue: #58a6ff;
    --ok: #3fb950;
    --warn: #d29922;
    --danger: #f85149;
    --tint-base: #0b1220;
    --hairline-base: #1f2a3f;
    --tint-ink: #ffffff;
    --tint-muted: #93a4bb;
    --card-text: #eef2f7;
    --di-number-ink: #f8fafc;
    --disc-general: #5b6675;
    --disc-general-ink: #f4f7fb;
    --disc-architectural: #c2339b;
    --disc-architectural-ink: #ffffff;
    --disc-mechanical: #ea6f1c;
    --disc-mechanical-ink: #ffffff;
    --disc-electrical: #bfd425;
    --disc-electrical-ink: #1c1600;
    --disc-plumbing: #1f9d4d;
    --disc-plumbing-ink: #ffffff;
    --disc-fire: #e5484d;
    --disc-fire-ink: #ffffff;
    --disc-lifesafety: #b0304f;
    --disc-lifesafety-ink: #ffffff;
    --disc-edge-w: 3px;
    --status-fill-a: 13%;
    --warn-ink: var(--warn);
    --danger-ink: var(--danger);
    --lp-hex-3fb950: #3fb950;
    --lp-hex-d29922: #d29922;
}
/* GENERATED END */