/* Olifant app tokens — design v2.4 greys (Nov 1 13:46, Johannes: more grey contrast) on v2.2 (dz-design, design/v2/mocks/tokens/base.css of Nov 1 08:43, values copied as they
   are) plus the syntax colours and the System block. Neutrals, status, type, spacing, shape, focus, motion. The accent
   (primary and the AI's blue) is in accent.css: the one file a colour choice changes.
   Mode: no data-theme on <html> = System (the OS decides, the media query at the end); data-theme="light" | "dark" =
   the Appearance choice in the account menu (theme.js sets it before paint). Dark mirrors light: values only. */
:root {
  color-scheme: light;
  /* surfaces */
  --ol-chrome: #FFFFFF;        /* bar, sidebar: white, separated by hairlines */
  --ol-chrome-2: #ECEEF2;      /* hover / active pill on chrome, the search field */
  --ol-paper: #FFFFFF;         /* the content surface; the site's page */
  --ol-box: #ECEEF2;           /* grey box on paper: cards, table head, code, bands */
  --ol-box-2: #E1E4EA;         /* deeper box: folder icon tile, pressed, badges */
  --ol-line: #D9DDE3;          /* hairline on paper */
  --ol-line-chrome: #D9DDE3;   /* hairline between chrome and paper */
  --ol-well: #ECEEF2;          /* the grey box a paper sits in, where it earns it: previews, the site's app frame, very wide windows */
  /* text */
  --ol-ink: #111827;           /* 17.7:1 on paper */
  --ol-ink-2: #374151;         /* 10.3:1 */
  --ol-muted: #5F6672;         /* captions, dates: 5.8:1 on paper, 5.3:1 on box */
  /* status (not the accent) */
  --ol-danger: #B42318;        /* error text, "failed", "infected": 6.6:1 on paper */
  --ol-danger-soft: #FEE4E2;
  --ol-ok: #0F6E56;            /* "saved", "live": 6.2:1 */
  --ol-warn: #B54708;          /* 5.4:1 */
  --ol-warn-soft: #FEF0C7;
  /* type */
  --ol-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ol-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;   /* paths, ids, code, keys only */
  --ol-t-xs: 12px; --ol-t-sm: 13.5px; --ol-t-base: 15px; --ol-t-md: 16px; --ol-t-lg: 19px;
  --ol-t-xl: 22px; --ol-t-2xl: 28px; --ol-t-3xl: clamp(34px, 5vw, 54px);
  --ol-w-regular: 400; --ol-w-medium: 500; --ol-w-semibold: 600;   /* no Light weight anywhere */
  --ol-lh-tight: 1.1; --ol-lh-body: 1.55; --ol-track-display: -0.02em;
  /* spacing (8-pt) */
  --ol-s-1: 4px; --ol-s-2: 8px; --ol-s-3: 12px; --ol-s-4: 16px; --ol-s-5: 20px; --ol-s-6: 24px; --ol-s-8: 32px; --ol-s-10: 40px; --ol-s-14: 56px;
  --ol-row: 48px; --ol-control: 40px; --ol-bar: 56px; --ol-tabbar: 60px;
  --ol-sidebar: 240px; --ol-rail: 260px; --ol-measure: 720px; --ol-site-max: 1120px; --ol-sheet-max: 1440px;
  /* shape */
  --ol-r-sm: 6px; --ol-r: 10px; --ol-r-lg: 14px; --ol-r-sheet: 12px; --ol-r-full: 999px;
  --ol-shadow-sheet: none;                                        /* light: hairlines separate; no shadow */
  --ol-shadow-pop: 0 8px 24px -8px rgba(17, 24, 39, .18);        /* menus, dialogs */
  --ol-shadow-seg: 0 1px 2px rgba(17, 24, 39, .08);              /* the on-segment */
  --ol-shadow-knob: 0 1px 2px rgba(0, 0, 0, .2);                  /* switch knob */
  --ol-shadow-sheet-up: 0 -8px 24px -8px rgba(0, 0, 0, .25);     /* phone action sheets */
  --ol-focus: 0 0 0 2px var(--ol-paper), 0 0 0 4px var(--ol-accent);
  --ol-motion: 120ms ease-out;          /* hover, focus, menu open */
  --ol-motion-slow: 200ms ease-out;     /* sheets, dialogs */
  --ol-overlay: rgba(17, 24, 39, .45);  /* behind dialogs and sheets */
  --ol-border: 1px solid var(--ol-line);
  --ol-border-strong: 1px solid #808894; /* inputs at rest: 3.4:1 on paper, 3.1:1 on box (WCAG 1.4.11) */
  /* frames for previewed files: an HTML or PDF page paints on white, a video on black, in both modes */
  --ol-frame: #FFFFFF; --ol-media: #000000;
  /* syntax colours for highlighted code (code.css uses only these; ≥ 4.5:1 on --ol-box) */
  --ol-hl-comment: #5F6672; --ol-hl-keyword: #7A3E9D; --ol-hl-string: #0F6E56; --ol-hl-number: #A84207;
  --ol-hl-name: #1D4F91; --ol-hl-type: #8A2E5C; --ol-hl-tag: #0B6280; --ol-hl-del: #B42318; --ol-hl-ins: #0F6E56;
}
@media (max-width: 599px) { :root { --ol-control: 44px; } }   /* phone: tap targets 44 px (criteria A5) */
@media (prefers-reduced-motion: reduce) { :root { --ol-motion: 0ms; --ol-motion-slow: 0ms; } }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ol-chrome: #0E1116; --ol-chrome-2: #232830;
  --ol-paper: #0E1116; --ol-box: #232830; --ol-box-2: #2F353F; --ol-line: #30363F; --ol-line-chrome: #30363F; --ol-well: #232830;
  --ol-ink: #F5F6F8; --ol-ink-2: #CBD0D8; --ol-muted: #9DA4B0;     /* muted 7.5:1 on the base, 6.0:1 on the grey box */
  --ol-danger: #F97066; --ol-danger-soft: #3D1F1C; --ol-ok: #4FD1A5; --ol-warn: #F8B24D; --ol-warn-soft: #3C2C14;
  --ol-shadow-sheet: none;
  --ol-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .8); --ol-shadow-seg: 0 1px 2px rgba(0, 0, 0, .5); --ol-shadow-sheet-up: 0 -8px 24px -8px rgba(0, 0, 0, .7);
  --ol-overlay: rgba(0, 0, 0, .65); --ol-border-strong: 1px solid #7A8290; /* 4.3:1 on the base */
  --ol-hl-comment: #9DA4B0; --ol-hl-keyword: #D2A8FF; --ol-hl-string: #7EE2B8; --ol-hl-number: #F8B24D;
  --ol-hl-name: #9CC8FF; --ol-hl-type: #FFA7C0; --ol-hl-tag: #79C0FF; --ol-hl-del: #F97066; --ol-hl-ins: #4FD1A5;
}
/* System with the OS in dark: the same values as the block above (keep the two in step). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ol-chrome: #0E1116; --ol-chrome-2: #232830;
    --ol-paper: #0E1116; --ol-box: #232830; --ol-box-2: #2F353F; --ol-line: #30363F; --ol-line-chrome: #30363F; --ol-well: #232830;
    --ol-ink: #F5F6F8; --ol-ink-2: #CBD0D8; --ol-muted: #9DA4B0;     /* muted 7.5:1 on the base, 6.0:1 on the grey box */
    --ol-danger: #F97066; --ol-danger-soft: #3D1F1C; --ol-ok: #4FD1A5; --ol-warn: #F8B24D; --ol-warn-soft: #3C2C14;
    --ol-shadow-sheet: none;
    --ol-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .8); --ol-shadow-seg: 0 1px 2px rgba(0, 0, 0, .5); --ol-shadow-sheet-up: 0 -8px 24px -8px rgba(0, 0, 0, .7);
    --ol-overlay: rgba(0, 0, 0, .65); --ol-border-strong: 1px solid #7A8290; /* 4.3:1 on the base */
    --ol-hl-comment: #9DA4B0; --ol-hl-keyword: #D2A8FF; --ol-hl-string: #7EE2B8; --ol-hl-number: #F8B24D;
    --ol-hl-name: #9CC8FF; --ol-hl-type: #FFA7C0; --ol-hl-tag: #79C0FF; --ol-hl-del: #F97066; --ol-hl-ins: #4FD1A5;
  }
}