/*
 * tokens.css — single source of truth for design values.
 * Mirrors the Next.js dark palette + Tailwind spacing/type/radius scales
 * so the docsservice rendering matches the look the merchant + dev sites
 * had under the React stack. No selector lives here — only :root variables.
 */

:root {
  /* Color tokens — HSL components, applied via hsl(var(--token)) so
     callers can compose with alpha (hsl(var(--background) / 0.5)). */
  --background: 0 0% 4%;
  --foreground: 0 0% 98%;
  --card: 0 0% 7%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 7%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 14%;
  --input: 0 0% 14%;
  --ring: 0 0% 83.1%;

  /* Radius scale — matches Tailwind --radius cascade. */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px); /* 4px */
  --radius-md: calc(var(--radius) - 2px); /* 6px */
  --radius-lg: var(--radius);              /* 8px */
  --radius-full: 9999px;

  /* Spacing scale — mirrors Tailwind 0.25rem step. */
  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1_5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2_5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */

  /* Type scale — mirrors Tailwind text-{size}. */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* Z-index scale — used by sticky header (40), drawer overlay (30). */
  --z-drawer: 30;
  --z-header: 40;
  --z-modal: 50;

  /* Layout sizes. */
  --header-height: 3.5rem;        /* 56px = h-14 */
  --sidebar-width: 16rem;         /* 256px — tightened from 18rem to give the article column more room when the right-rail TOC is visible */
  --sidebar-drawer-width: 20rem;  /* 320px = w-80 */
  --breakpoint-lg: 1024px;        /* desktop ≥ 1024px shows sidebar */

  /* ============================================================
   * Aliases for the easydocs vocabulary used by blocks.css.
   * blocks.css was lifted from /var/www/easydocs/docsserver and
   * references --color-* names; mapping them to our HSL tokens
   * here keeps blocks.css unchanged + makes every block render
   * with our dark palette.
   * ============================================================ */
  --color-bg: hsl(var(--background));
  --color-surface: hsl(var(--card));
  --color-surface-raised: hsl(var(--popover));
  --color-surface-inset: hsl(var(--muted));

  --color-text: hsl(var(--foreground));
  --color-text-secondary: hsl(var(--muted-foreground));
  --color-text-tertiary: hsl(var(--muted-foreground) / 0.7);

  --color-border: hsl(var(--border));
  --color-border-subtle: hsl(var(--border) / 0.5);

  --color-primary: hsl(var(--foreground));
  --color-primary-subtle: hsl(var(--foreground) / 0.08);

  --color-info:    hsl(var(--foreground));
  --color-success: hsl(142 70% 60%);
  --color-warning: hsl(38 90% 65%);
  --color-danger:  hsl(0 80% 70%);

  /* Inline + block code chrome. */
  --color-inline-code-bg:     hsl(var(--muted));
  --color-inline-code-border: hsl(var(--border));
  --color-inline-code-text:   hsl(var(--foreground));
  --color-code-bg:            hsl(0 0% 0% / 0.3);
  --color-code-border:        hsl(var(--border));
  --color-code-text:          hsl(var(--foreground) / 0.95);
  --color-code-header:        hsl(var(--card));
  --color-code-lang:          hsl(var(--muted-foreground));
  --color-code-filename:      hsl(var(--foreground));
  --color-code-line-num:      hsl(var(--muted-foreground) / 0.5);
  --color-code-copy:          hsl(var(--muted-foreground));
  --color-code-copy-hover:    hsl(var(--foreground));

  --color-mark: hsl(38 90% 65% / 0.3);
}

/* ============================================================
 * Light theme — applied via [data-theme="light"] on <html>.
 * Theme is selected by static/js/theme.js (persists in localStorage,
 * applied inline before first paint to avoid flash). The easydocs
 * --color-* aliases above resolve to whatever --foreground / --card
 * / etc. currently are, so they pick up the swap automatically.
 * Only the literal hsl() values (e.g. --color-code-bg) need
 * explicit re-declaration here.
 * ============================================================ */
:root[data-theme="light"] {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 0% 94%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 91%;
  --input: 0 0% 91%;
  --ring: 0 0% 9%;

  /* Code chrome that used hard-coded hsl(0 0% 0% / 0.3) for the
     dark code background; in light mode use a subtle muted gray. */
  --color-code-bg: hsl(0 0% 96%);
}