/* ============================================================ GRAPHITE DESIGN SYSTEM — TOKENS Direction B · Software / Systems / Digital engineering Two layers: 1. PRIMITIVES — raw scale values, never change 2. ROLES — semantic aliases that flip per theme ============================================================ */ :root { /* =========================================================== 1 · PRIMITIVES =========================================================== */ /* Neutrals (graphite ramp) */ --ink-900: #14161a; --ink-800: #22262e; --ink-700: #3a404b; --ink-600: #4a515f; --ink-500: #5b6472; --ink-400: #8b93a1; --ink-300: #c2c8d2; --ink-200: #e7eaef; --ink-100: #f0f2f5; --ink-50: #f5f6f8; --white: #ffffff; /* Brand */ --blue-700: #1639c2; --blue-600: #1e47e6; --blue-500: #2d5bff; --blue-300: #91a9ff; --blue-100: #e7eeff; --blue-50: #f2f6ff; --cyan-600: #0f9fbd; --cyan-500: #19c6e6; --cyan-100: #ddf6fb; /* Semantic primitives */ --success-600: #126b3d; --success-500: #16834a; --success-100: #e3f6ec; --warning-600: #9a6b00; --warning-500: #e0a000; --warning-100: #fbf0d9; --danger-600: #c7373b; --danger-500: #e5484d; --danger-100: #fce9ea; /* Dark-surface primitives */ --d-app: #0d0f13; --d-surface: #181b21; --d-raised: #1e222a; --d-sunken: #111317; --d-border: #2a2f38; --d-border-2: #3a414d; /* =========================================================== 2 · ROLES — LIGHT (default) =========================================================== */ --bg-app: var(--ink-50); --bg-surface: var(--white); --bg-raised: var(--white); --bg-sunken: var(--ink-100); --bg-inverse: var(--ink-900); --field-bg: var(--white); --row-hover: var(--blue-50); --topbar-bg: rgba(245, 246, 248, 0.85); --border: var(--ink-200); --border-strong: var(--ink-300); --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-tertiary: var(--ink-400); --text-inverse: var(--white); --text-link: var(--blue-600); --accent: var(--blue-500); --accent-hover: var(--blue-600); --focus-ring: rgba(45, 91, 255, 0.35); --avatar-bg: var(--ink-800); /* Soft (tinted) status pairs — bg + fg */ --soft-blue-bg: var(--blue-100); --soft-blue-fg: var(--blue-700); --soft-cyan-bg: var(--cyan-100); --soft-cyan-fg: var(--cyan-600); --soft-success-bg: var(--success-100); --soft-success-fg: var(--success-600); --soft-warning-bg: var(--warning-100); --soft-warning-fg: var(--warning-600); --soft-danger-bg: var(--danger-100); --soft-danger-fg: var(--danger-600); --soft-neutral-bg: var(--ink-100); --soft-neutral-fg: var(--ink-600); /* ---------- Typography ---------- */ --font-display: "Archivo", system-ui, sans-serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-display: 52px; --fs-h1: 34px; --fs-h2: 24px; --fs-h3: 19px; --fs-body-lg: 17px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px; --fs-mono: 13px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.6; /* ---------- Spacing (4px base) ---------- */ --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-11: 64px; --sp-12: 80px; /* ---------- Radius ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px; /* ---------- Elevation ---------- */ --shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.06); --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 1px rgba(20, 22, 26, 0.04); --shadow-md: 0 4px 12px -2px rgba(20, 22, 26, 0.10), 0 2px 6px -2px rgba(20, 22, 26, 0.06); --shadow-lg: 0 12px 30px -10px rgba(20, 22, 26, 0.20), 0 4px 10px -6px rgba(20, 22, 26, 0.10); --shadow-xl: 0 30px 60px -30px rgba(20, 22, 26, 0.35); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- Layout ---------- */ --container: 1200px; --grid-cols: 12; --grid-gutter: 24px; } /* =========================================================== 2 · ROLES — DARK =========================================================== */ [data-theme="dark"] { --bg-app: var(--d-app); --bg-surface: var(--d-surface); --bg-raised: var(--d-raised); --bg-sunken: var(--d-sunken); --bg-inverse: var(--white); --field-bg: var(--d-sunken); --row-hover: rgba(45, 91, 255, 0.12); --topbar-bg: rgba(13, 15, 19, 0.85); --border: var(--d-border); --border-strong: var(--d-border-2); --text-primary: #f4f6f8; --text-secondary: #a3abb8; --text-tertiary: #727b8a; --text-inverse: var(--ink-900); --text-link: var(--blue-300); --avatar-bg: var(--d-border-2); --soft-blue-bg: rgba(45, 91, 255, 0.20); --soft-blue-fg: #9db4ff; --soft-cyan-bg: rgba(25, 198, 230, 0.16); --soft-cyan-fg: #6fdcef; --soft-success-bg: rgba(22, 131, 74, 0.22); --soft-success-fg: #5ed39a; --soft-warning-bg: rgba(224, 160, 0, 0.20); --soft-warning-fg: #e7be5b; --soft-danger-bg: rgba(229, 72, 77, 0.20); --soft-danger-fg: #f08a8d; --soft-neutral-bg: rgba(255, 255, 255, 0.08);--soft-neutral-fg: #c2c8d2; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 30px -10px rgba(0, 0, 0, 0.65), 0 4px 10px -6px rgba(0, 0, 0, 0.45); --shadow-xl: 0 30px 60px -30px rgba(0, 0, 0, 0.80); } /* Smooth theme cross-fade */ body, .demo, .card, .input, .select, .textarea, .table thead th, .side, .topbar, .badge, .tag, .pagination .pg, .swatch, .tok, .tile .box { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }