/* Lenses.fyi design tokens: "Blueprint × Lens barrel".
   Light: cool drafting film with blueprint lines. Dark: neutral charcoal and bright text. Blueprint blue is kept for drawings and the grid.
   Components take every colour, size and timing from these tokens; nothing else defines colour.
   Theme: follows the device, or data-theme="light" / "dark" on <html> (the theme switch). */

:root {
  /* Surfaces */
  --paper: #f3f5f8;          /* the page */
  --sheet: #fbfcfd;          /* cards, panels, inputs */
  --sheet-sunk: #e8edf3;     /* wells, tracks, selected rows */

  /* Ink */
  --ink: #141a24;            /* text */
  --ink-2: #4b5567;          /* secondary text */
  --ink-3: #5c677b;          /* hints and captions */

  /* Lines */
  --rule: #ccd4e0;           /* 1 px construction lines, dividers */
  --rule-strong: #8d9bb2;    /* control borders */

  /* Interface: lens-barrel black for fills (primary buttons, selected states), coral for text
     accents (links, active labels). */
  --accent: #1b1e23;
  --accent-hover: #353a43;
  --accent-soft: #e9ecf0;
  --on-accent: #ffffff;
  --link: #b33d1a;
  --bar: #1b1e23;            /* the brand bar (top of the page) */
  --on-bar: #ffffff;

  /* Blueprint blue: only the drawings, their dimension lines and the drafting grid */
  --blue: #0b3b8c;
  --draw: #0b3b8c;
  --grid: rgb(11 59 140 / 8%);

  /* Drafting coral: the one accent. Shapes and marks use --coral; text uses --coral-ink. */
  --coral: #e8613c;
  --coral-ink: #b33d1a;
  --coral-soft: #fde6dd;

  /* Lens barrel */
  --barrel: #15171a;
  --barrel-2: #272b31;
  --engrave: #f2f4f7;
  --engrave-dim: #79808b;
  --dof: #e2b100;            /* depth-of-field style marks */
  --glass: #7aa7c7;
  --metal: #9aa0a8;

  /* Series: up to four lenses side by side (compare) */
  --series-1: #0b3b8c;
  --series-2: #e8613c;
  --series-3: #16806a;
  --series-4: #8657c2;

  /* Status */
  --good: #1b6b45;
  --good-soft: #dcefe4;
  --warn: #8a5800;
  --warn-soft: #fbeed2;
  --bad: #b42318;
  --bad-soft: #fbe3e0;

  /* Type */
  --font-text: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-num: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 14px;
  --t-md: 16px;
  --t-lg: 19px;
  --t-xl: 24px;
  --t-2xl: 32px;
  --t-3xl: 44px;
  --lh-tight: 1.15;
  --lh: 1.5;
  --caps: .08em;             /* letter-spacing for small capitals labels */

  /* Space: 4 px steps */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Shape: nearly square; full rounding only for genuinely round things */
  --r-mark: 2px;
  --r: 4px;
  --r-round: 999px;
  --line: 1px solid var(--rule);
  --line-strong: 1px solid var(--rule-strong);
  --grid-size: 14px;

  /* Depth: flat by default, lift only for things that float above the page */
  --lift: 0 1px 2px rgb(10 20 40 / 6%);
  --float: 0 10px 30px rgb(10 20 40 / 16%), 0 2px 6px rgb(10 20 40 / 8%);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17181b;
    --sheet: #1f2126;
    --sheet-sunk: #131417;
    --ink: #eeeff1;
    --ink-2: #c9ccd3;
    --ink-3: #a2a7b1;
    --rule: #33363d;
    --rule-strong: #555a64;
    --accent: #eceef1;
    --accent-hover: #ffffff;
    --accent-soft: #2c2f36;
    --on-accent: #17181b;
    --link: #ffa98d;
    --blue: #79a4ff;
    --draw: #79a4ff;
    --grid: rgb(121 164 255 / 4%);
    --bar: #0d0e10;
    --on-bar: #eeeff1;
    --coral: #ff9473;
    --coral-ink: #ffa98d;
    --coral-soft: #3b2722;
    --barrel: #0b0c0e;
    --barrel-2: #2a2d33;
    --engrave: #eeeff1;
    --engrave-dim: #858a94;
    --dof: #e8c45a;
    --glass: #8ab0cc;
    --metal: #8e939c;
    --series-1: #79a4ff;
    --series-2: #ff9473;
    --series-3: #5ccfae;
    --series-4: #c2a5f5;
    --good: #82d4a6;
    --good-soft: #17302a;
    --warn: #f2c870;
    --warn-soft: #362e1c;
    --bad: #ff8f85;
    --bad-soft: #3d2326;
    --lift: 0 1px 2px rgb(0 0 0 / 35%);
    --float: 0 12px 36px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 35%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #17181b;
  --sheet: #1f2126;
  --sheet-sunk: #131417;
  --ink: #eeeff1;
  --ink-2: #c9ccd3;
  --ink-3: #a2a7b1;
  --rule: #33363d;
  --rule-strong: #555a64;
  --accent: #eceef1;
  --accent-hover: #ffffff;
  --accent-soft: #2c2f36;
  --on-accent: #17181b;
  --link: #ffa98d;
  --blue: #79a4ff;
  --draw: #79a4ff;
  --grid: rgb(121 164 255 / 4%);
  --bar: #0d0e10;
  --on-bar: #eeeff1;
  --coral: #ff9473;
  --coral-ink: #ffa98d;
  --coral-soft: #3b2722;
  --barrel: #0b0c0e;
  --barrel-2: #2a2d33;
  --engrave: #eeeff1;
  --engrave-dim: #858a94;
  --dof: #e8c45a;
  --glass: #8ab0cc;
  --metal: #8e939c;
  --series-1: #79a4ff;
  --series-2: #ff9473;
  --series-3: #5ccfae;
  --series-4: #c2a5f5;
  --good: #82d4a6;
  --good-soft: #17302a;
  --warn: #f2c870;
  --warn-soft: #362e1c;
  --bad: #ff8f85;
  --bad-soft: #3d2326;
  --lift: 0 1px 2px rgb(0 0 0 / 35%);
  --float: 0 12px 36px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 35%);
  color-scheme: dark;
}

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