/**
 * @file public/css/se2-design-tokens.css
 * @description Design tokens for Search Engine 2. CSS custom properties only —
 *   change a token here and the look updates everywhere. No hardcoded
 *   colors / sizes inside component styles.
 *
 * Two themes exposed via [data-theme]:
 *   "soft-dark"  (default) — soft slate-navy + cyan/violet accents, premium
 *                            "not-too-dark" enterprise look
 *   "soft-light"          — pearl + ink, for users who prefer light mode
 *
 * Operators can flip themes at runtime:
 *   document.documentElement.setAttribute('data-theme', 'soft-light');
 */

:root,
:root[data-theme="soft-dark"] {
  /* ── Surfaces (layered greys, never pure black) ── */
  --se2-bg-base:        #111214;
  --se2-bg-mesh-1:      rgba(201,168,76, 0.045);
  --se2-bg-mesh-2:      rgba(184,146,58, 0.04);
  --se2-bg-mesh-3:      rgba(34, 197, 94, 0.025);
  --se2-surface-0:      rgba(22,24,28, 0.55);   /* topbar wash */
  --se2-surface-1:      rgba(26,28,33, 0.7);    /* rail wash */
  --se2-surface-2:      rgba(30,32,38, 0.6);    /* card body */
  --se2-surface-3:      rgba(36,38,45, 0.8);    /* card hover */
  --se2-overlay:        rgba(14,15,18, 0.85);

  /* ── Lines & strokes ── */
  --se2-line-soft:      rgba(255, 255, 255, 0.05);
  --se2-line-default:   rgba(155,157,162, 0.14);
  --se2-line-strong:    rgba(155,157,162, 0.28);
  --se2-line-accent:    rgba(201,168,76, 0.36);

  /* ── Text ── */
  --se2-text-primary:   #f5f7fb;
  --se2-text-secondary: #d2d4d8;
  --se2-text-tertiary:  #9a9ca1;
  --se2-text-muted:     #6b6d73;
  --se2-text-dim:       #4c4e54;

  /* ── Brand & semantic colors ── */
  --se2-brand-1:        #C9A84C;    /* sky */
  --se2-brand-2:        #d8b45a;    /* violet */
  --se2-brand-3:        #34d399;    /* mint */
  --se2-success:        #10b981;
  --se2-warning:        #f59e0b;
  --se2-danger:         #f43f5e;
  --se2-info:           #d4b260;

  /* ── Source palette ── */
  --se2-cat-blue:       #C9A84C;
  --se2-cat-indigo:     #C9A84C;
  --se2-cat-green:      #10b981;
  --se2-cat-violet:     #b8923a;
  --se2-cat-rose:       #f43f5e;
  --se2-cat-amber:      #f59e0b;
  --se2-cat-cyan:       #C9A84C;
  --se2-cat-orange:     #f97316;

  /* ── Gradients ── */
  --se2-gradient-brand: linear-gradient(135deg, var(--se2-brand-1) 0%, var(--se2-brand-2) 60%, #C9A84C 100%);
  --se2-gradient-text:  linear-gradient(90deg, #F0D58A, #ecd089);
  --se2-gradient-panel: linear-gradient(135deg, rgba(201,168,76, 0.07), rgba(184,146,58, 0.06));
  --se2-gradient-card:  linear-gradient(180deg, var(--se2-surface-2), var(--se2-surface-1));
  --se2-gradient-hover: linear-gradient(180deg, var(--se2-surface-3), var(--se2-surface-2));

  /* ── Shadows ── */
  --se2-shadow-sm:  0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 12px -6px rgba(0,0,0,0.4);
  --se2-shadow-md:  0 8px 24px -10px rgba(0,0,0,0.5),  0 0 0 1px rgba(255,255,255,0.02) inset;
  --se2-shadow-lg:  0 24px 60px -28px rgba(201,168,76,0.28), 0 12px 30px -16px rgba(0,0,0,0.5);
  --se2-shadow-glow:0 0 30px -8px rgba(201,168,76,0.35);

  /* ── Radii ── */
  --se2-radius-sm:  6px;
  --se2-radius-md:  10px;
  --se2-radius-lg:  14px;
  --se2-radius-xl:  18px;
  --se2-radius-pill:99px;

  /* ── Typography ── */
  --se2-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --se2-font-mono: 'JetBrains Mono', Consolas, Menlo, 'SF Mono', monospace;
  --se2-tracking-display: -0.022em;
  --se2-tracking-body:    -0.005em;
  --se2-tracking-caps:    0.08em;

  /* ── Spacing scale (8px base) ── */
  --se2-space-1: 4px;
  --se2-space-2: 8px;
  --se2-space-3: 12px;
  --se2-space-4: 16px;
  --se2-space-5: 20px;
  --se2-space-6: 24px;
  --se2-space-8: 32px;
  --se2-space-10:40px;

  /* ── Motion ── */
  --se2-motion-fast: 120ms cubic-bezier(.16,1,.3,1);
  --se2-motion-base: 220ms cubic-bezier(.16,1,.3,1);
  --se2-motion-slow: 360ms cubic-bezier(.16,1,.3,1);
}

/* ─── Light theme — pearl + ink, premium softness ─────────────────────────── */
:root[data-theme="soft-light"] {
  --se2-bg-base:        #f6f7fb;
  --se2-bg-mesh-1:      rgba(201,168,76, 0.08);
  --se2-bg-mesh-2:      rgba(184,146,58, 0.06);
  --se2-bg-mesh-3:      rgba(34, 197, 94, 0.05);
  --se2-surface-0:      rgba(255, 255, 255, 0.85);
  --se2-surface-1:      rgba(255, 255, 255, 0.7);
  --se2-surface-2:      rgba(255, 255, 255, 0.95);
  --se2-surface-3:      #ffffff;
  --se2-overlay:        rgba(255, 255, 255, 0.95);

  --se2-line-soft:      rgba(15, 23, 41, 0.06);
  --se2-line-default:   rgba(15, 23, 41, 0.10);
  --se2-line-strong:    rgba(15, 23, 41, 0.18);
  --se2-line-accent:    rgba(201,168,76, 0.42);

  --se2-text-primary:   #111214;
  --se2-text-secondary: #2c2e32;
  --se2-text-tertiary:  #4c4e54;
  --se2-text-muted:     #6b6d73;
  --se2-text-dim:       #9a9ca1;

  --se2-gradient-text:  linear-gradient(90deg, #C9A84C, #9a7230);
  --se2-gradient-panel: linear-gradient(135deg, rgba(201,168,76, 0.10), rgba(184,146,58, 0.08));
  --se2-gradient-card:  linear-gradient(180deg, var(--se2-surface-3), var(--se2-surface-2));
  --se2-gradient-hover: linear-gradient(180deg, var(--se2-surface-3), #ffffff);

  --se2-shadow-sm:  0 1px 2px rgba(15, 23, 41, 0.06);
  --se2-shadow-md:  0 4px 14px -4px rgba(15, 23, 41, 0.12), 0 0 0 1px rgba(15, 23, 41, 0.04);
  --se2-shadow-lg:  0 20px 50px -16px rgba(201,168,76, 0.22), 0 8px 24px -10px rgba(15, 23, 41, 0.12);
  --se2-shadow-glow:0 0 30px -8px rgba(201,168,76, 0.45);
}