/* ===========================================================
   Design Tokens — Linear / Notion-inspired dark theme
   All visual variables flow from this file. Do NOT hardcode
   colors / radii / spacing in components.
   =========================================================== */

:root {
  /* ------- Color: background layers ------- */
  --bg-app:        #0c0d10;
  --bg-surface:    #16171b;
  --bg-elev:       #1c1d22;
  --bg-input:      #131418;
  --bg-overlay:    rgba(10, 11, 14, 0.72);

  /* ------- Color: borders ------- */
  --border-subtle: #22242a;
  --border-strong: #2c2f37;
  --border-focus:  #5e6ad2;

  /* ------- Color: text ------- */
  --text-primary:   #ececef;
  --text-secondary: #a1a1aa;
  --text-muted:     #71717a;
  --text-inverse:   #0a0a0a;
  --text-on-accent: #ffffff;

  /* ------- Color: accent (restrained, single hue) ------- */
  --accent:        #5e6ad2;
  --accent-hover:  #4f5bc4;
  --accent-soft:   rgba(94, 106, 210, 0.14);
  --accent-ring:   rgba(94, 106, 210, 0.28);

  /* ------- Color: status ------- */
  --success:       #3fb950;
  --success-soft:  rgba(63, 185, 80, 0.14);
  --warning:       #d29922;
  --warning-soft:  rgba(210, 153, 34, 0.14);
  --error:         #f85149;
  --error-soft:    rgba(248, 81, 73, 0.14);

  /* ------- Radius ------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ------- Typography ------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas,
               ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 0.75rem;     /* 12 */
  --fs-13: 0.8125rem;   /* 13 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-15: 0.9375rem;   /* 15 */
  --fs-16: 1rem;        /* 16 */
  --fs-18: 1.125rem;    /* 18 */
  --fs-20: 1.25rem;     /* 20 */
  --fs-24: 1.5rem;      /* 24 */
  --fs-28: 1.75rem;     /* 28 */
  --fs-32: 2rem;        /* 32 */

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ------- Spacing (4-px scale) ------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ------- Shadow ------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);

  /* ------- Motion ------- */
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   280ms;
  --easing:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ------- App Shell metrics ------- */
  --sidebar-w:        240px;
  --sidebar-w-lg:     264px;
  --topbar-h:         56px;
  --content-max:      820px;
  --breakpoint-md:    768px;
  --breakpoint-lg:    1024px;

  /* ------- Z-index ------- */
  --z-sidebar:  20;
  --z-topbar:   30;
  --z-drawer:   40;
  --z-toast:    50;
  --z-modal:    60;
}