/* ==========================================================================
   Design tokens — the single source of visual truth.

   Rules for this file:
   - No component styles here. Tokens only.
   - Every colour, space, radius and type size used anywhere in the product
     must resolve to a token defined here. If a page needs a value that is not
     here, the value is wrong or the scale is missing one step — fix the scale,
     do not hard-code.
   - Two themes, same token names. Nothing outside this file knows about theme.
   ========================================================================== */

:root {
  /* ---- type scale -------------------------------------------------------
     A 6-step scale. Hierarchy comes from size + weight + colour, never from
     making everything bold. */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;  /* 11px — table metadata, timestamps */
  --text-xs:  0.75rem;    /* 12px — labels, badges, captions   */
  --text-sm:  0.8125rem;  /* 13px — table body, dense UI       */
  --text-base:0.875rem;   /* 14px — body                       */
  --text-md:  1rem;       /* 16px — card heading               */
  --text-lg:  1.125rem;   /* 18px — section title              */
  --text-xl:  1.375rem;   /* 22px — page title                 */
  --text-2xl: 1.75rem;    /* 28px — primary metric             */
  --text-3xl: 2.25rem;    /* 36px — checkout amount            */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.55;

  --tracking-tight: -0.011em;
  --tracking-wide: 0.04em;

  /* ---- spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- radii — restrained. Cards are not pills. ------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* ---- neutrals -------------------------------------------------------- */
  --grey-0:  #ffffff;
  --grey-25: #fcfcfd;
  --grey-50: #f7f8fa;
  --grey-100:#eff1f4;
  --grey-200:#e3e6eb;
  --grey-300:#cfd4dc;
  --grey-400:#9ba3af;
  --grey-500:#6b7280;
  --grey-600:#4b5361;
  --grey-700:#353b45;
  --grey-800:#22262e;
  --grey-900:#14171c;
  --grey-950:#0b0d12;

  /* ---- accent: ink blue. One accent, used sparingly. ------------------- */
  --accent-50:  #eef2ff;
  --accent-100: #dfe6ff;
  --accent-300: #9db0f5;
  --accent-500: #3b5bdb;
  --accent-600: #2f49b8;
  --accent-700: #263c98;

  /* ---- semantic status palette ----------------------------------------
     One system, used identically on every page. A status never gets a
     different treatment because it appears in a different table. */
  --ok-bg:     #e7f6ec;  --ok-fg:     #146c2e;  --ok-dot:   #1a9245;
  --warn-bg:   #fdf2dd;  --warn-fg:   #7a4c07;  --warn-dot: #c47f0a;
  --danger-bg: #fdeaea;  --danger-fg: #9b1c1c;  --danger-dot:#d93a3a;
  --info-bg:   #e9eefc;  --info-fg:   #27408f;  --info-dot: #3b5bdb;
  --muted-bg:  #f0f1f4;  --muted-fg:  #555c68;  --muted-dot:#98a0ad;

  /* ---- surfaces & lines ------------------------------------------------ */
  --bg-app:      var(--grey-50);
  --bg-surface:  var(--grey-0);
  --bg-sunken:   var(--grey-25);
  --bg-hover:    var(--grey-50);
  --bg-active:   var(--grey-100);
  --bg-inverse:  var(--grey-900);

  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --border-focus:  var(--accent-500);

  --fg:          var(--grey-900);
  --fg-muted:    var(--grey-500);
  --fg-subtle:   var(--grey-400);
  --fg-inverse:  var(--grey-0);
  --fg-accent:   var(--accent-600);

  /* ---- elevation — only for things that float --------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 20, 28, 0.09), 0 1px 3px rgba(16, 20, 28, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 20, 28, 0.14);

  --focus-ring: 0 0 0 3px rgba(59, 91, 219, 0.28);

  /* ---- layout ----------------------------------------------------------- */
  --sidebar-width: 232px;
  --header-height: 56px;
  --content-max: 1360px;

  --transition-fast: 110ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-app:     var(--grey-950);
    --bg-surface: #13161c;
    --bg-sunken:  #0f1217;
    --bg-hover:   #1a1e26;
    --bg-active:  #212630;
    --bg-inverse: var(--grey-100);

    --border:        #262b35;
    --border-strong: #343a46;

    --fg:         #e8eaee;
    --fg-muted:   #9aa3b1;
    --fg-subtle:  #6d7684;
    --fg-inverse: var(--grey-900);
    --fg-accent:  #93a8f7;

    --ok-bg:     #102a19;  --ok-fg:     #6ee79a;  --ok-dot:    #2fbc60;
    --warn-bg:   #2d2208;  --warn-fg:   #f2c469;  --warn-dot:  #d99b16;
    --danger-bg: #2e1214;  --danger-fg: #f79a9a;  --danger-dot:#e25555;
    --info-bg:   #141d38;  --info-fg:   #a3b6f9;  --info-dot:  #5c7bea;
    --muted-bg:  #1b1f27;  --muted-fg:  #98a0ad;  --muted-dot: #6d7684;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(93, 123, 234, 0.4);
  }
}