/* =========================================================
   NineClip Tools — Design Tokens
   Brand palette, type scale, spacing, radius, shadows, motion
   ========================================================= */

:root {
  /* Brand — Primary */
  --color-primary-50:  #EFF4FF;
  --color-primary-100: #DBE6FF;
  --color-primary-200: #BFD3FF;
  --color-primary-300: #93B4FF;
  --color-primary-400: #6090FF;
  --color-primary-500: #3B82F6;   /* PRD: primary */
  --color-primary-600: #2563EB;   /* PRD: primary */
  --color-primary-700: #1D4FD8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* Secondary — slate */
  --color-slate-900: #0F172A;     /* PRD: secondary */
  --color-slate-800: #1E293B;     /* PRD: secondary */
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-400: #94A3B8;
  --color-slate-300: #CBD5E1;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F1F5F9;
  --color-slate-50:  #F8FAFC;     /* PRD: background */

  /* Accent */
  --color-accent-cyan:   #06B6D4; /* PRD: accent */
  --color-accent-purple: #8B5CF6; /* PRD: accent */
  --color-accent-cyan-soft:   rgba(6, 182, 212, .12);
  --color-accent-purple-soft: rgba(139, 92, 246, .12);

  /* Status */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #3B82F6;

  /* Category accent colors */
  --cat-image:     #2563EB;
  --cat-pdf:       #DC2626;
  --cat-document:  #7C3AED;
  --cat-ai:        #06B6D4;
  --cat-text:      #0EA5E9;
  --cat-seo:       #16A34A;
  --cat-developer: #F97316;
  --cat-calc:      #DB2777;
  --cat-color:     #8B5CF6;
  --cat-security:  #0F172A;
  --cat-social:    #EC4899;
  --cat-utility:   #14B8A6;

  /* Surface */
  --bg-base:    #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-glass:   rgba(255, 255, 255, 0.72);
  --bg-glass-strong: rgba(255, 255, 255, 0.86);
  --bg-inverse: #0F172A;
  --bg-soft:    #F1F5F9;
  --bg-soft-2:  #E2E8F0;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-tertiary:  #64748B;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;
  --text-link:      #2563EB;

  /* Border */
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-soft:   rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-focus:  #3B82F6;

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

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  3.75rem;    /* 60 */
  --fs-6xl:  4.5rem;     /* 72 */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

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

  /* Spacing — 4px base */
  --space-0:  0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* Shadows — soft, premium */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 0 4px rgba(59, 130, 246, 0.18);
  --shadow-glow-purple: 0 0 0 4px rgba(139, 92, 246, 0.18);
  --shadow-glow-cyan: 0 0 0 4px rgba(6, 182, 212, 0.18);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  --grad-accent: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
  --grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.18) 0%, transparent 60%),
               radial-gradient(900px 500px at 0% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 55%),
               radial-gradient(700px 400px at 50% 100%, rgba(6, 182, 212, 0.12) 0%, transparent 55%);
  --grad-card-hover: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(139, 92, 246, 0.10) 100%);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --header-h: 72px;
  --header-h-mobile: 60px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* Dark theme (auto, opt-in via media query, token-driven) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-base: #0B1220;
    --bg-surface: #111A2E;
    --bg-glass: rgba(17, 26, 46, 0.72);
    --bg-glass-strong: rgba(17, 26, 46, 0.86);
    --bg-soft: #16213B;
    --bg-soft-2: #1F2D4D;

    --text-primary:   #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-tertiary:  #94A3B8;
    --text-muted:     #64748B;

    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-soft:   rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* Manual dark theme via [data-theme="dark"] */
:root[data-theme="dark"] {
  --bg-base: #0B1220;
  --bg-surface: #111A2E;
  --bg-glass: rgba(17, 26, 46, 0.72);
  --bg-glass-strong: rgba(17, 26, 46, 0.86);
  --bg-soft: #16213B;
  --bg-soft-2: #1F2D4D;

  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary:  #94A3B8;
  --text-muted:     #64748B;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-soft:   rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);
}