/**
 * ─────────────────────────────────────────────
 *  SPB Drive — Personal Cloud Drive
 * ─────────────────────────────────────────────
 *  Author  : Simon-Pierre Boucher
 *  Contact : contact@spboucher.ai
 *  File    : src/web/assets/tokens.css
 *  Purpose : Design tokens — "Ivoire & Indigo" light-first identity,
 *            self-hosted fonts, validated data palette, dark theme
 *  License : MIT © Simon-Pierre Boucher
 * ─────────────────────────────────────────────
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/vendor/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}

/* ── Light (default) — warm ivory canvas, electric indigo ink ── */
:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efede6;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --border: #e5e2d8;
  --border-strong: #d5d1c3;
  --text: #1b1a15;
  --muted: #6f6a5d;
  --accent: #4f46e5;
  --accent-ink: #4338ca;
  --accent-2: #0d9488;
  --danger: #d92d20;
  --warning: #b45309;
  --accent-soft: rgba(79, 70, 229, 0.09);
  --danger-soft: rgba(217, 45, 32, 0.08);
  --scrim: rgba(27, 26, 21, 0.45);
  --scrim-heavy: rgba(20, 19, 15, 0.82);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --shadow-1: 0 1px 2px rgba(27, 26, 21, 0.05), 0 2px 8px rgba(27, 26, 21, 0.04);
  --shadow-2: 0 2px 6px rgba(27, 26, 21, 0.06), 0 12px 28px rgba(27, 26, 21, 0.09);
  --shadow-pop: 0 4px 14px rgba(27, 26, 21, 0.08), 0 24px 60px rgba(27, 26, 21, 0.16);
  --ring: 0 0 0 2px var(--accent);

  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c5ce0 55%, #0d9488 130%);
  --aurora-a: rgba(79, 70, 229, 0.07);
  --aurora-b: rgba(13, 148, 136, 0.06);
  --aurora-c: rgba(214, 54, 127, 0.045);

  --ease: cubic-bezier(0.25, 0.7, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --shiki-light-bg: transparent;
  color-scheme: light;

  /* Data palette (storage buckets) — CVD-validated, same in both themes */
  --cat-images: #0f9488;
  --cat-video: #7c5ce0;
  --cat-audio: #d6367f;
  --cat-docs: #3b7de0;
  --cat-archives: #d97706;
  --cat-other: #5c66a8;
}

/* ── Dark — warm charcoal, same DNA ── */
[data-theme='dark'] {
  --bg: #131210;
  --surface: #1b1a17;
  --surface-2: #232019;
  --surface-glass: rgba(27, 26, 23, 0.78);
  --border: #2e2b23;
  --border-strong: #3d392e;
  --text: #edeae1;
  --muted: #9c968a;
  --accent: #8f88f8;
  --accent-ink: #a9a3fa;
  --accent-2: #2dd4bf;
  --danger: #f87168;
  --warning: #fbbf24;
  --accent-soft: rgba(143, 136, 248, 0.13);
  --danger-soft: rgba(248, 113, 104, 0.12);
  --scrim: rgba(6, 6, 4, 0.6);
  --scrim-heavy: rgba(6, 6, 4, 0.85);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 4px 14px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);

  --grad-brand: linear-gradient(135deg, #6e66f0 0%, #8f76ec 55%, #14b8a6 130%);
  --aurora-a: rgba(110, 102, 240, 0.1);
  --aurora-b: rgba(20, 184, 166, 0.07);
  --aurora-c: rgba(214, 54, 127, 0.06);
  color-scheme: dark;
}

/* Shiki dual-theme output: light by default, dark under [data-theme=dark] */
.shiki,
.shiki span {
  color: var(--shiki-light) !important;
  background: transparent !important;
}
[data-theme='dark'] .shiki,
[data-theme='dark'] .shiki span {
  color: var(--shiki-dark) !important;
}

/* Folder palette (8 choices) — deep enough to read on ivory */
:root {
  --folder-blue: #3b7de0;
  --folder-teal: #0f9488;
  --folder-green: #3f9e58;
  --folder-yellow: #d9a406;
  --folder-orange: #e8722a;
  --folder-red: #d92d20;
  --folder-purple: #7c5ce0;
  --folder-pink: #d6367f;
}
[data-theme='dark'] {
  --folder-blue: #6ba4f8;
  --folder-teal: #2dd4bf;
  --folder-green: #6fce8a;
  --folder-yellow: #f5ce56;
  --folder-orange: #fb9d67;
  --folder-red: #f87168;
  --folder-purple: #ab93f5;
  --folder-pink: #f279b2;
}