/* ToolsOS — design tokens
   Premium dark mode: graphite / near-black surfaces, subtle borders,
   restrained violet/blue/cyan accents. Light theme provided as an option. */

:root {
  /* Surfaces (dark is the default product skin) */
  --bg-0: #080a0f;   /* app background */
  --bg-1: #0d1017;   /* rail / sidebar */
  --bg-2: #121621;   /* cards */
  --bg-3: #171c2a;   /* elevated / inputs */
  --bg-4: #1e2435;   /* hover / active */
  --bg-inset: #0a0d14;

  /* Hairline borders */
  --border: #222838;
  --border-strong: #2d3446;
  --border-soft: #1a2030;

  /* Text */
  --text: #e8ebf4;
  --text-muted: #a2abc0;
  --text-dim: #6b7488;
  --text-inverse: #0a0d14;

  /* Accents (used sparingly) */
  --accent: #7c5cff;        /* violet — primary */
  --accent-strong: #6a46ff;
  --accent-2: #3b82f6;      /* blue */
  --accent-3: #22d3ee;      /* cyan */
  --accent-contrast: #ffffff;
  --accent-ghost: rgba(124, 92, 255, 0.14);
  --accent-ring: rgba(124, 92, 255, 0.45);

  /* Semantic */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.12);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 64px;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
    "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-tight: 1.2;
  --lh-normal: 1.55;

  /* Elevation (subtle, never heavy) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--accent-ring);

  /* Layout */
  --sidebar-w: 268px;
  --topbar-h: 62px;
  --content-max: 1440px;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Checkerboard for transparency previews */
  --checker: 
    linear-gradient(45deg, #1a1f2e 25%, transparent 25%),
    linear-gradient(-45deg, #1a1f2e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1f2e 75%),
    linear-gradient(-45deg, transparent 75%, #1a1f2e 75%);
}

/* Optional light theme (toggle via Settings -> data-theme="light") */
:root[data-theme="light"] {
  --bg-0: #f4f6fb;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f1f4fa;
  --bg-4: #e7ecf6;
  --bg-inset: #eef1f8;
  --border: #e2e7f0;
  --border-strong: #d2d9e6;
  --border-soft: #edf0f6;
  --text: #121726;
  --text-muted: #51607a;
  --text-dim: #8893a8;
  --text-inverse: #ffffff;
  --accent-ghost: rgba(124, 92, 255, 0.1);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.14);
  --checker:
    linear-gradient(45deg, #e5e9f2 25%, transparent 25%),
    linear-gradient(-45deg, #e5e9f2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e9f2 75%),
    linear-gradient(-45deg, transparent 75%, #e5e9f2 75%);
}

/* Accent variants selectable in Settings */
:root[data-accent="blue"]   { --accent: #3b82f6; --accent-strong: #2f74e6; --accent-ring: rgba(59,130,246,0.45); --accent-ghost: rgba(59,130,246,0.14); }
:root[data-accent="cyan"]   { --accent: #22d3ee; --accent-strong: #12bcd6; --accent-ring: rgba(34,211,238,0.45); --accent-ghost: rgba(34,211,238,0.14); --accent-contrast:#04121a; }
:root[data-accent="emerald"]{ --accent: #34d399; --accent-strong: #22c08a; --accent-ring: rgba(52,211,153,0.45); --accent-ghost: rgba(52,211,153,0.14); --accent-contrast:#04120c; }