/* tokens.css - Bullet PDF design tokens. Every colour, font, radius and shadow in the app is
   derived from these variables; component CSS never hard-codes a colour.

   Direction: "black, white and safety orange". Ink (--ink) is the brand's black: text, focus
   rings and quiet icons are black on white (white on black in dark mode). Safety orange is
   the action and "you are here" colour:
     --accent   solid orange fills: every primary button (Open a PDF, Download, a dialog's
                main action, the landing pages' CTA), the current mode and tool, the current
                page number, count badges, the landing pages' "Ready?" panel;
     --accent-line  orange for lines that must be seen: outlines, rings, tracks, progress,
                insertion bars (deepened in light mode so it keeps 3:1 on white and the desk);
     --accent-ink   the accent as a text colour: orange on dark surfaces (5.7:1+), ink on light
                ones (orange text on white is 2.8:1 and fails);
     --marker / --swipe  the brand's highlighter stroke (logo, headline word, pressed toggles,
                selected tabs); --select the on-page selection.
   Crimson (--red) is reserved for destructive actions and redaction and is kept well away
   from the orange in hue. Greys are warm. The workspace is a light warm-grey desk (black in
   dark mode) that white pages sit on.

   Orange is never a text-on-white or white-on-orange colour: it fails WCAG AA there. Text
   and icons on an orange fill are --on-accent (near-black, 7:1; 5.3:1 on the pressed shade). */

:root {
    color-scheme: light;

    /* surfaces */
    --desk:          #ECEBE7;   /* workspace behind the pages (warm light grey) */
    --desk-dot:      #D8D6CF;   /* faint dot grid on the desk */
    --surface:       #FFFFFF;   /* bars, panels, dialogs */
    --surface-2:     #F7F7F5;   /* inset areas, inputs */
    --surface-3:     #EFEEEB;   /* hover */
    --paper:         #FFFFFF;   /* page placeholder colour */
    --line:          #E5E4E0;   /* hairlines */
    --line-strong:   #CAC8C1;   /* input borders, dividers that must be seen */

    /* text (all >= 4.5:1 on surface, surface-2, surface-3 and desk) */
    --text:          #0A0A0A;
    --text-2:        #4A4943;
    --text-3:        #6A6861;
    --text-on-ink:   #FFFFFF;

    /* brand ink: black */
    --ink:           #0A0A0A;
    --ink-hover:     #2B2A26;
    --ink-soft:      #EEEDEA;   /* tinted backgrounds, pressed ghost buttons */
    --ink-line:      #BDBBB3;

    /* accent: safety orange */
    --marker:        #FF6E00;
    --marker-soft:   rgba(255, 110, 0, 0.16);
    --marker-text:   #0A0A0A;   /* text sitting on the marker colour (7:1) */

    /* action: safety orange fills with near-black text (see the header) */
    --accent:        #FF6E00;
    --accent-hover:  #F26400;   /* near-black on it: 6.2:1 */
    --accent-press:  #E05A00;   /* near-black on it: 5.3:1 */
    --on-accent:     #0A0A0A;   /* 7.0:1 on --accent */
    --accent-soft:   rgba(255, 110, 0, 0.12);
    --accent-line:   #E05A00;   /* 3.7:1 on white, 3.1:1 on the desk */
    --accent-ink:    var(--text);

    /* semantic */
    --red:           #C0102C;   /* crimson: destructive + redaction, never confused with orange */
    --red-soft:      #FBE6E9;
    --green:         #1D7A4B;
    --green-soft:    #E0F2E7;
    --amber:         #8A5A00;
    --amber-soft:    #FBF0D4;

    /* on-page editing chrome (pages are white in both themes) */
    --select:        #EE5F00;   /* selection outline + handles: orange deepened to 3.3:1 on white */
    --select-soft:   rgba(238, 95, 0, 0.10);
    --field-tint:    rgba(255, 110, 0, 0.08);  /* fillable form fields */
    --field-line:    rgba(238, 95, 0, 0.50);
    --red-paper:     #C0102C;   /* redaction marks on the white page (not redefined for dark) */

    /* shape */
    --radius-xs: 4px;
    --radius-s:  6px;
    --radius:    10px;
    --radius-l:  16px;
    --radius-xl: 24px;
    --pill:      999px;

    /* depth */
    --shadow-1:    0 1px 2px rgba(20, 18, 12, 0.07), 0 1px 1px rgba(20, 18, 12, 0.04);
    --shadow-page: 0 1px 2px rgba(20, 18, 12, 0.10), 0 12px 30px -10px rgba(20, 18, 12, 0.22);
    --shadow-pop:  0 18px 44px -10px rgba(20, 18, 12, 0.28), 0 3px 8px rgba(20, 18, 12, 0.08);
    --shadow-bar:  0 1px 0 var(--line);

    /* type: Funnel Display (ink-trapped geometric grotesk) for the wordmark, headlines and
       dialog titles; its text companion Funnel Sans for the UI; IBM Plex Mono for numbers */
    --font-ui:      "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --fs-xs:  11px;
    --fs-s:   12.5px;
    --fs-m:   14px;
    --fs-l:   16px;
    --fs-xl:  20px;
    --fs-2xl: 28px;
    --fs-hero: clamp(34px, 5.4vw, 64px);

    /* layout */
    --topbar-h:    56px;
    --toolstrip-h: 52px;
    --status-h:    30px;
    --left-w:      232px;
    --right-w:     288px;
    --gap:         12px;

    /* motion */
    --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 120ms;
    --dur:      200ms;

    /* the orange "swipe": painted behind the active mode tab / tool */
    --swipe: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 90%, transparent 90%);
}

/* Dark: black desk and near-black chrome, white type, warm dark greys; ink turns white. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --desk:        #000000;
    --desk-dot:    #1C1B19;
    --surface:     #0E0E0D;
    --surface-2:   #161614;
    --surface-3:   #22211E;
    --paper:       #FFFFFF;
    --line:        #262522;
    --line-strong: #393932;

    --text:        #F5F5F3;
    --text-2:      #B9B7AF;
    --text-3:      #8C8A82;
    --text-on-ink: #0A0A0A;

    --ink:         #FFFFFF;
    --ink-hover:   #E6E5E1;
    --ink-soft:    #2A2925;     /* also the form-field text colour on white pages: keep it dark */
    --ink-line:    #55534B;

    --marker:      #FF6E00;
    --marker-soft: rgba(255, 110, 0, 0.22);
    --marker-text: #0A0A0A;

    --accent-soft: rgba(255, 110, 0, 0.18);
    --accent-line: #FF6E00;     /* 5.7:1+ on every dark surface */
    --accent-ink:  #FF6E00;     /* orange text is fine on black: 5.7-7.5:1 */

    --red:         #FF4A6B;
    --red-soft:    #3A1520;
    --green:       #4CC98A;
    --green-soft:  #12291E;
    --amber:       #FBBF24;
    --amber-soft:  #33280C;

    --select:      #EE5F00;
    --select-soft: rgba(238, 95, 0, 0.14);

    /* the swipe at 64%: white labels and icons crossing it keep >= 4.7:1 on every dark surface */
    --swipe: linear-gradient(transparent 58%, color-mix(in srgb, var(--marker) 64%, transparent) 58%,
             color-mix(in srgb, var(--marker) 64%, transparent) 90%, transparent 90%);

    --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-page: 0 1px 2px rgba(0, 0, 0, 0.6), 0 14px 36px -8px rgba(0, 0, 0, 0.8);
    --shadow-pop:  0 18px 44px -8px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3px 8px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; }
}