spb/drive Public

1/**2 * ─────────────────────────────────────────────3 *  SPB Drive — Personal Cloud Drive4 * ─────────────────────────────────────────────5 *  Author  : Simon-Pierre Boucher6 *  Contact : contact@spboucher.ai7 *  File    : src/web/assets/tokens.css8 *  Purpose : Design tokens — "Ivoire & Indigo" light-first identity,9 *            self-hosted fonts, validated data palette, dark theme10 *  License : MIT © Simon-Pierre Boucher11 * ─────────────────────────────────────────────12 */1314@font-face {15  font-family: 'Inter';16  font-style: normal;17  font-weight: 400;18  font-display: swap;19  src: url('/vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2');20}21@font-face {22  font-family: 'Inter';23  font-style: normal;24  font-weight: 500;25  font-display: swap;26  src: url('/vendor/fonts/inter/inter-latin-500-normal.woff2') format('woff2');27}28@font-face {29  font-family: 'Inter';30  font-style: normal;31  font-weight: 600;32  font-display: swap;33  src: url('/vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2');34}35@font-face {36  font-family: 'Inter';37  font-style: normal;38  font-weight: 700;39  font-display: swap;40  src: url('/vendor/fonts/inter/inter-latin-700-normal.woff2') format('woff2');41}42@font-face {43  font-family: 'JetBrains Mono';44  font-style: normal;45  font-weight: 400;46  font-display: swap;47  src: url('/vendor/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');48}49@font-face {50  font-family: 'JetBrains Mono';51  font-style: normal;52  font-weight: 600;53  font-display: swap;54  src: url('/vendor/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2') format('woff2');55}5657/* ── Light (default) — warm ivory canvas, electric indigo ink ── */58:root {59  --bg: #f6f5f1;60  --surface: #ffffff;61  --surface-2: #efede6;62  --surface-glass: rgba(255, 255, 255, 0.78);63  --border: #e5e2d8;64  --border-strong: #d5d1c3;65  --text: #1b1a15;66  --muted: #6f6a5d;67  --accent: #4f46e5;68  --accent-ink: #4338ca;69  --accent-2: #0d9488;70  --danger: #d92d20;71  --warning: #b45309;72  --accent-soft: rgba(79, 70, 229, 0.09);73  --danger-soft: rgba(217, 45, 32, 0.08);74  --scrim: rgba(27, 26, 21, 0.45);75  --scrim-heavy: rgba(20, 19, 15, 0.82);7677  --radius: 14px;78  --radius-sm: 10px;79  --radius-lg: 20px;8081  --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;82  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;8384  --shadow-1: 0 1px 2px rgba(27, 26, 21, 0.05), 0 2px 8px rgba(27, 26, 21, 0.04);85  --shadow-2: 0 2px 6px rgba(27, 26, 21, 0.06), 0 12px 28px rgba(27, 26, 21, 0.09);86  --shadow-pop: 0 4px 14px rgba(27, 26, 21, 0.08), 0 24px 60px rgba(27, 26, 21, 0.16);87  --ring: 0 0 0 2px var(--accent);8889  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c5ce0 55%, #0d9488 130%);90  --aurora-a: rgba(79, 70, 229, 0.07);91  --aurora-b: rgba(13, 148, 136, 0.06);92  --aurora-c: rgba(214, 54, 127, 0.045);9394  --ease: cubic-bezier(0.25, 0.7, 0.35, 1);95  --spring: cubic-bezier(0.34, 1.4, 0.44, 1);96  --shiki-light-bg: transparent;97  color-scheme: light;9899  /* Data palette (storage buckets) — CVD-validated, same in both themes */100  --cat-images: #0f9488;101  --cat-video: #7c5ce0;102  --cat-audio: #d6367f;103  --cat-docs: #3b7de0;104  --cat-archives: #d97706;105  --cat-other: #5c66a8;106}107108/* ── Dark — warm charcoal, same DNA ── */109[data-theme='dark'] {110  --bg: #131210;111  --surface: #1b1a17;112  --surface-2: #232019;113  --surface-glass: rgba(27, 26, 23, 0.78);114  --border: #2e2b23;115  --border-strong: #3d392e;116  --text: #edeae1;117  --muted: #9c968a;118  --accent: #8f88f8;119  --accent-ink: #a9a3fa;120  --accent-2: #2dd4bf;121  --danger: #f87168;122  --warning: #fbbf24;123  --accent-soft: rgba(143, 136, 248, 0.13);124  --danger-soft: rgba(248, 113, 104, 0.12);125  --scrim: rgba(6, 6, 4, 0.6);126  --scrim-heavy: rgba(6, 6, 4, 0.85);127128  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);129  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);130  --shadow-pop: 0 4px 14px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);131132  --grad-brand: linear-gradient(135deg, #6e66f0 0%, #8f76ec 55%, #14b8a6 130%);133  --aurora-a: rgba(110, 102, 240, 0.1);134  --aurora-b: rgba(20, 184, 166, 0.07);135  --aurora-c: rgba(214, 54, 127, 0.06);136  color-scheme: dark;137}138139/* Shiki dual-theme output: light by default, dark under [data-theme=dark] */140.shiki,141.shiki span {142  color: var(--shiki-light) !important;143  background: transparent !important;144}145[data-theme='dark'] .shiki,146[data-theme='dark'] .shiki span {147  color: var(--shiki-dark) !important;148}149150/* Folder palette (8 choices) — deep enough to read on ivory */151:root {152  --folder-blue: #3b7de0;153  --folder-teal: #0f9488;154  --folder-green: #3f9e58;155  --folder-yellow: #d9a406;156  --folder-orange: #e8722a;157  --folder-red: #d92d20;158  --folder-purple: #7c5ce0;159  --folder-pink: #d6367f;160}161[data-theme='dark'] {162  --folder-blue: #6ba4f8;163  --folder-teal: #2dd4bf;164  --folder-green: #6fce8a;165  --folder-yellow: #f5ce56;166  --folder-orange: #fb9d67;167  --folder-red: #f87168;168  --folder-purple: #ab93f5;169  --folder-pink: #f279b2;170}171