/*
 * thinking.ink design tokens
 *
 * Color roles
 *   surface-*  what things sit on (canvas, sidebars, sheets)
 *   fill-*     things placed on surfaces (buttons, selected rows, bubbles)
 *   border-*   strokes
 *   glyph-*    text and icons. glyph-1 is always max contrast against its
 *              background; glyph-2 is the quietest text that still passes
 *              WCAG AA (4.5:1) on the surfaces and fills it is used on.
 *
 * Theme is set with data-theme on <html>. Dark is the default.
 */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-1: #0a0a0a;
  --surface-2: #000000;
  --fill-1: #ffffff;
  --fill-2: #1f1f1f;
  --fill-3: #1a1a1a;
  --border-1: #ffffff;
  --border-2: #3a3a3a;
  --border-3: #1c1c1c;
  --glyph-1: #ffffff;
  --glyph-2: #838383;

  /* Not a token: glyph-1 resolved against fill-1 (see .on-fill-1). */
  --_glyph-on-fill-1: #000000;

  --danger: #ff3b30;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;

  --surface-1: #ffffff;
  /* Mockup value is #d9d9d9, which is nearly identical to fill-2 (#dbdbdb)
     and makes chat bubbles vanish on the canvas. Lightened so fills read. */
  --surface-2: #f2f2f2;
  --fill-1: #000000;
  --fill-2: #dbdbdb;
  --fill-3: #efefef;
  --border-1: #000000;
  --border-2: #cacaca;
  --border-3: #e0e0e0;
  --glyph-1: #000000;
  --glyph-2: #656565;

  --_glyph-on-fill-1: #ffffff;

  --danger: #ff3b30;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.08);
}

:root {
  /* Type: Inter, one size, two weights. Mobile bumps the size (see below). */
  --font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size: 13px;
  --line-height: 20px;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Control sizes for fixed-height components. */
  --control-sm: 32px;
  --control-md: 40px;

  /* Spacing scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --panel-width: 280px;
  --panel-inset: 8px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

  /* Bottom sheets (mobile): a long, soft deceleration like native iOS sheets. */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-sheet: 500ms;
}

@media (max-width: 720px) {
  :root {
    --font-size: 15px;
    --line-height: 22px;
  }
}

/* glyph-1 flips when it sits on fill-1 (e.g. the primary button). */
.on-fill-1 {
  --glyph-1: var(--_glyph-on-fill-1);
}