/*
 * Design tokens for every app in this repo. Source of truth; see docs/reference/design.md.
 * Imported by apps/console (layout.tsx) and copied into apps/www at build time.
 *
 * Theme follows the OS. <html data-theme="light|dark"> forces one.
 * The dark block is written twice (media query + attribute) on purpose.
 */

:root {
  color-scheme: light;

  /* Type: system UI font (SF Pro on Apple), dense 13px body */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  --text-2xs: 11px; /* axis ticks, kbd, tiny meta */
  --text-xs: 12px; /* captions, chips, buttons, table heads */
  --text-sm: 13px; /* body, nav, inputs, list rows */
  --text-md: 14px; /* card titles */
  --text-lg: 17px; /* spotlight and banner titles */
  --text-xl: 20px; /* page titles */
  --text-2xl: 24px; /* KPI values */

  /* Spacing (4px grid; 2px allowed inside controls) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /*
   * Radii. Plain rounded corners are kept tight so the circular-arc corner reads clean.
   * Where the browser supports corner-shape (see below) radii grow and corners become
   * iOS-style continuous squircles.
   */
  --corner: round;
  --radius-xs: 3px; /* bars, heatmap cells */
  --radius-sm: 5px; /* chips, small tiles, checkboxes */
  --radius-md: 7px; /* buttons, inputs, nav items, stat tiles */
  --radius-lg: 10px; /* cards */
  --radius-xl: 14px; /* banners, spotlight art tiles */
  --radius-full: 999px; /* dots, avatars, pills */

  /* Neutrals: the app is one flat white surface; cards are separated by hairlines */
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f7; /* soft fills: hover, soft buttons, note boxes, active nav */
  --surface-3: #ececee; /* tracks, empty cells, segmented track */
  --line: #ebebed;
  --line-strong: #dcdce0;
  --ink: #111113;
  --ink-2: #55555d;
  --ink-3: #8b8b94;
  --ink-inverse: #ffffff;
  --primary: #111113;
  --primary-hover: #2c2c31;
  --on-primary: #ffffff;
  --accent: #7c5cfa;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px rgb(124 92 250 / 0.45);

  /* Colour pops: mark / -soft tinted background / -ink text on surface or -soft */
  --violet: #7c5cfa;
  --violet-soft: #f1edff;
  --violet-ink: #5a3bdb;
  --sky: #1e9be6;
  --sky-soft: #e6f4fd;
  --sky-ink: #0b6fae;
  --amber: #f0a20c;
  --amber-soft: #fdf3dc;
  --amber-ink: #925c00;
  --pink: #ec4c94;
  --pink-soft: #fde9f2;
  --pink-ink: #b51f66;
  --green: #22b35e;
  --green-soft: #e4f6eb;
  --green-ink: #12783d;
  --orange: #f26b1d;
  --orange-soft: #feefe4;
  --orange-ink: #b44608;
  --red: #e5484d;
  --red-soft: #fdebeb;
  --red-ink: #b42328;

  --chart-grid: #efeff1;
  --tooltip-bg: #1c1c1f;
  --tooltip-ink: #fafafa;
  --scrim: rgb(9 9 11 / 0.36);
  --shadow-pop: 0 10px 30px rgb(17 17 19 / 0.12), 0 0 0 1px var(--line);
  /* Glossy tool tiles: top highlight mixed into the hue */
  --tile-highlight: rgb(255 255 255 / 0.38);
  --on-hue: #ffffff; /* text and glyphs on a full hue: tool tiles, banners, checked boxes */
  --graphite: #3d3d44; /* neutral tool tile (e.g. Dashboard) */

  /* Status (reserved meaning; always with an icon or word) */
  --success: var(--green);
  --success-soft: var(--green-soft);
  --success-ink: var(--green-ink);
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --warning-ink: var(--amber-ink);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --danger-ink: var(--red-ink);

  /* Charts: fixed categorical order */
  --chart-1: var(--violet);
  --chart-2: var(--sky);
  --chart-3: var(--amber);
  --chart-4: var(--pink);
  --chart-5: var(--green);
  --chart-6: var(--orange);
  --chart-axis: var(--ink-3);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /*
   * Graph-paper band at the top of hero and launcher cards (see docs/reference/design.md > Patterns).
   * Anchored to the bottom centre: the band's bottom border is the last grid line. Give bands a
   * height of 12 + n * 24px so the top edge cuts a half cell, never a sliver.
   */
  --grid-size: 24px;
  --pattern-grid:
    linear-gradient(var(--line) 1px, transparent 0) center bottom / var(--grid-size)
      var(--grid-size),
    linear-gradient(90deg, var(--line) 1px, transparent 0) center bottom / var(--grid-size)
      var(--grid-size),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}

/* Continuous (squircle) corners where supported. Radii grow to keep the same optical size. */
@supports (corner-shape: superellipse(1.6)) {
  :root {
    --corner: superellipse(1.6);
    --radius-xs: 4px;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0b0b0d;
    --surface: #111114;
    --surface-2: #1a1a1e;
    --surface-3: #25252b;
    --line: #232328;
    --line-strong: #313138;
    --ink: #f4f4f5;
    --ink-2: #b4b4bd;
    --ink-3: #7e7e89;
    --ink-inverse: #111113;
    --primary: #f4f4f5;
    --primary-hover: #ffffff;
    --on-primary: #111113;
    --accent: #9a6bff;
    --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px rgb(154 107 255 / 0.6);
    --violet: #9a6bff;
    --violet-soft: rgb(154 107 255 / 0.16);
    --violet-ink: #c9b5ff;
    --sky: #2aa3d8;
    --sky-soft: rgb(56 176 230 / 0.16);
    --sky-ink: #8fd3f5;
    --amber: #e2a226;
    --amber-soft: rgb(240 170 40 / 0.16);
    --amber-ink: #f6cf7c;
    --pink: #ec5ba1;
    --pink-soft: rgb(233 82 154 / 0.17);
    --pink-ink: #ffa6cf;
    --green: #27b463;
    --green-soft: rgb(40 190 105 / 0.16);
    --green-ink: #86e3ab;
    --orange: #f0702a;
    --orange-soft: rgb(240 110 40 / 0.17);
    --orange-ink: #ffb68a;
    --red: #ec5257;
    --red-soft: rgb(229 72 77 / 0.18);
    --red-ink: #ffa3a6;
    --chart-grid: #1f1f24;
    --tooltip-bg: #f4f4f5;
    --tooltip-ink: #111113;
    --scrim: rgb(0 0 0 / 0.55);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.6), 0 0 0 1px var(--line-strong);
    --tile-highlight: rgb(255 255 255 / 0.26);
    --graphite: #4a4a52;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0b0b0d;
  --surface: #111114;
  --surface-2: #1a1a1e;
  --surface-3: #25252b;
  --line: #232328;
  --line-strong: #313138;
  --ink: #f4f4f5;
  --ink-2: #b4b4bd;
  --ink-3: #7e7e89;
  --ink-inverse: #111113;
  --primary: #f4f4f5;
  --primary-hover: #ffffff;
  --on-primary: #111113;
  --accent: #9a6bff;
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px rgb(154 107 255 / 0.6);
  --violet: #9a6bff;
  --violet-soft: rgb(154 107 255 / 0.16);
  --violet-ink: #c9b5ff;
  --sky: #2aa3d8;
  --sky-soft: rgb(56 176 230 / 0.16);
  --sky-ink: #8fd3f5;
  --amber: #e2a226;
  --amber-soft: rgb(240 170 40 / 0.16);
  --amber-ink: #f6cf7c;
  --pink: #ec5ba1;
  --pink-soft: rgb(233 82 154 / 0.17);
  --pink-ink: #ffa6cf;
  --green: #27b463;
  --green-soft: rgb(40 190 105 / 0.16);
  --green-ink: #86e3ab;
  --orange: #f0702a;
  --orange-soft: rgb(240 110 40 / 0.17);
  --orange-ink: #ffb68a;
  --red: #ec5257;
  --red-soft: rgb(229 72 77 / 0.18);
  --red-ink: #ffa3a6;
  --chart-grid: #1f1f24;
  --tooltip-bg: #f4f4f5;
  --tooltip-ink: #111113;
  --scrim: rgb(0 0 0 / 0.55);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.6), 0 0 0 1px var(--line-strong);
  --tile-highlight: rgb(255 255 255 / 0.26);
  --graphite: #4a4a52;
}

/* Every rounded box takes the corner shape; circles opt out with .is-round or their own rule. */
*,
::before,
::after {
  corner-shape: var(--corner);
}