/* interior.dev design tokens
 * Values taken from https://www.interior.dev (light + dark), so the components
 * in this folder and the app chrome around them read as one system.
 * The A4 sheet is deliberately NOT themed by these: it is a printed academic
 * document, not app chrome.
 */
:root {
  color-scheme: light dark;

  --bezel: #ffffff;
  --panel: #ffffff;
  --well: #ffffff;
  --sub: #fafafa;

  --hairline: #00000024;
  --hairline-strong: #00000042;

  --ink: #131313;
  --ink-2: #454545;
  --ink-3: #6e6e6e;

  --accent: #4568ff;
  --accent-soft: #edf1ff;
  --on-accent: #ffffff;
  --moss: #3d7a4e;
  --flag: #c0442f;

  --shadow-float: 0 28px 56px -24px #00000038, 0 0 0 1px #0000000f;
  --shadow-lift: 0 1px 2px #0000000a, 0 0 0 1px #0000001c;
  --shadow-well: inset 0 1px 2px #0000000d, inset 0 0 0 1px #0000001a;
  --shadow-cap: 0 1.5px 0 #00000017, inset 0 0 0 1px #0000001c;
  --shadow-row: inset 0 0 0 1px #00000012, 0 1px 2px #0000000d;

  /* A sheet of paper lying on the workspace */
  --shadow-sheet: 0 1px 2px #0f172a14, 0 14px 34px -14px #0f172a4d;

  /* Geometry and type, from the component sources */
  --r-lg: 11px;
  --r-md: 10px;
  --r-sm: 9px;
  --r-xs: 7px;
  --row-h: 32px;
  --control-h: 36px;
  --pad-control: 14px;
  --field-h: 40px;
  --text: 13px;
  --text-sm: 11.5px;
  --lead: 18px;
  --track: -0.01em;

  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion. CSS transitions retarget from their current value, which is the
     interruptibility the springs in the React originals provide. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-cell: cubic-bezier(0.32, 0.72, 0, 1);
  --t-cell: 0.24s;
  --t-lift: 0.18s;
  --t-open: 0.2s;
  --t-exit: 0.12s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bezel: #141312;
    --panel: #1d1d1a;
    --well: #252522;
    --sub: #1a1a17;

    --hairline: #ffffff29;
    --hairline-strong: #ffffff47;

    --ink: #f8f8f4;
    --ink-2: #c2c2ba;
    --ink-3: #93938b;

    --accent: #93b0ff;
    --accent-soft: #93b0ff24;
    --on-accent: #141312;
    --moss: #5bd79c;
    --flag: #f5897f;

    --shadow-float: 0 28px 56px -22px #000000b3, 0 0 0 1px #ffffff0d;
    --shadow-lift: 0 1px 2px #0006, inset 0 1px 0 #ffffff0d, 0 0 0 1px #ffffff0d;
    --shadow-well: inset 0 1px 3px #0006, inset 0 0 0 1px #ffffff08;
    --shadow-cap: 0 1.5px 0 #00000080, inset 0 0 0 1px #ffffff1a;
    --shadow-row: inset 0 0 0 1px #ffffff0f, 0 1px 2px #00000040;

    --shadow-sheet: 0 1px 2px #00000073, 0 18px 44px -16px #000000b3;
  }
}