/* ============================================================ GIO Design Tokens ============================================================ Direction: Examiner Navy + Amber accent Themes: Light (default) · Dark (data-theme="dark") Naming: Two-tier — primitives (--gio-blue-500) + semantics (--gio-color-action) ============================================================ */ /* ----------------------------------------------------------- PRIMITIVES — same in light & dark, semantics flip ----------------------------------------------------------- */ :root { /* ---- Color · Brand (deep navy + primary blue) ---- */ --gio-navy-900: #0C172D; --gio-navy-800: #131F3E; --gio-navy-700: #1B2A55; --gio-navy-600: #1E3A8A; /* deep navy anchor */ --gio-blue-700: #1D4ED8; --gio-blue-600: #2563EB; /* primary action — light */ --gio-blue-500: #3B82F6; /* primary action — dark */ --gio-blue-400: #60A5FA; --gio-blue-100: #DBEAFE; --gio-blue-50: #EFF6FF; /* ---- Color · Accent (amber — for "Most popular", AI highlights, hero spark) ---- */ --gio-amber-700: #B45309; --gio-amber-600: #D97706; --gio-amber-500: #F59E0B; /* accent anchor */ --gio-amber-400: #FBBF24; --gio-amber-100: #FEF3C7; --gio-amber-50: #FFFBEB; /* ---- Color · Neutral ramp (cool gray, Linear-style) ---- */ --gio-gray-50: #F8FAFC; --gio-gray-100: #F1F5F9; --gio-gray-200: #E2E8F0; --gio-gray-300: #CBD5E1; --gio-gray-400: #94A3B8; --gio-gray-500: #64748B; --gio-gray-600: #475569; --gio-gray-700: #334155; --gio-gray-800: #1E293B; --gio-gray-900: #0F172A; /* ---- Color · Skill accents (for L/R/W/S badges, charts) ---- */ --gio-skill-listening: #8B5CF6; /* violet */ --gio-skill-reading: #F97316; /* orange */ --gio-skill-writing: #2563EB; /* blue */ --gio-skill-speaking: #14B8A6; /* teal */ /* ---- Color · Semantic primitives ---- */ --gio-success-600: #059669; --gio-success-500: #10B981; --gio-success-100: #D1FAE5; --gio-warning-600: #D97706; --gio-warning-500: #F59E0B; --gio-warning-100: #FEF3C7; --gio-danger-600: #DC2626; --gio-danger-500: #EF4444; --gio-danger-100: #FEE2E2; --gio-info-600: #0284C7; --gio-info-500: #0EA5E9; --gio-info-100: #E0F2FE; /* ---- Typography ---- */ --gio-font-sans: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --gio-font-display: 'Inter', 'Pretendard', -apple-system, system-ui, sans-serif; --gio-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; --gio-w-regular: 400; --gio-w-medium: 500; --gio-w-semibold: 600; --gio-w-bold: 700; --gio-w-extrabold: 800; /* Type scale (1.125 modular, anchored on 16px body) */ --gio-text-xs: 12px; --gio-text-xs-lh: 16px; --gio-text-sm: 14px; --gio-text-sm-lh: 20px; --gio-text-base: 16px; --gio-text-base-lh: 24px; --gio-text-lg: 18px; --gio-text-lg-lh: 28px; --gio-text-xl: 20px; --gio-text-xl-lh: 30px; --gio-text-2xl: 24px; --gio-text-2xl-lh: 32px; --gio-text-3xl: 30px; --gio-text-3xl-lh: 38px; --gio-text-4xl: 36px; --gio-text-4xl-lh: 44px; --gio-text-5xl: 48px; --gio-text-5xl-lh: 56px; --gio-text-6xl: 60px; --gio-text-6xl-lh: 68px; --gio-tracking-tight: -0.02em; --gio-tracking-default: -0.011em; --gio-tracking-wide: 0.04em; /* ---- Spacing (4px base) ---- */ --gio-space-0: 0; --gio-space-1: 4px; --gio-space-2: 8px; --gio-space-3: 12px; --gio-space-4: 16px; --gio-space-5: 20px; --gio-space-6: 24px; --gio-space-7: 32px; --gio-space-8: 40px; --gio-space-9: 48px; --gio-space-10: 64px; --gio-space-11: 80px; --gio-space-12: 96px; /* ---- Radius ---- */ --gio-radius-xs: 4px; --gio-radius-sm: 6px; --gio-radius-md: 8px; --gio-radius-lg: 12px; --gio-radius-xl: 16px; --gio-radius-2xl: 20px; --gio-radius-3xl: 24px; --gio-radius-pill: 9999px; /* ---- Motion ---- */ --gio-ease-standard: cubic-bezier(0.2, 0, 0, 1); --gio-ease-out: cubic-bezier(0, 0, 0.2, 1); --gio-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --gio-dur-fast: 120ms; --gio-dur-med: 200ms; --gio-dur-slow: 320ms; /* ---- Layout ---- */ --gio-container: 1200px; --gio-container-max: 1280px; --gio-header-h: 72px; --gio-bp-sm: 640px; --gio-bp-md: 768px; --gio-bp-lg: 1024px; --gio-bp-xl: 1280px; --gio-bp-2xl: 1536px; } /* ----------------------------------------------------------- SEMANTICS — LIGHT (default) Components MUST consume semantics, not primitives. ----------------------------------------------------------- */ :root, :root[data-theme="light"] { /* Surfaces */ --gio-color-bg: var(--gio-gray-50); --gio-color-bg-subtle: var(--gio-gray-100); --gio-color-surface: #FFFFFF; --gio-color-surface-alt: var(--gio-gray-50); --gio-color-surface-inverse: var(--gio-navy-900); /* Text */ --gio-color-text: var(--gio-navy-900); --gio-color-text-strong: var(--gio-gray-900); --gio-color-text-muted: var(--gio-gray-500); --gio-color-text-faint: var(--gio-gray-400); --gio-color-text-disabled: var(--gio-gray-300); --gio-color-text-on-action: #FFFFFF; --gio-color-text-on-accent: #FFFFFF; --gio-color-text-link: var(--gio-blue-600); --gio-color-text-inverse: #FFFFFF; /* Borders / dividers */ --gio-color-border: var(--gio-gray-200); --gio-color-border-strong: var(--gio-gray-300); --gio-color-border-muted: var(--gio-gray-100); --gio-color-divider: var(--gio-gray-200); /* Action — primary (blue) */ --gio-color-action: var(--gio-blue-600); --gio-color-action-hover: var(--gio-blue-700); --gio-color-action-active: var(--gio-navy-600); --gio-color-action-soft: var(--gio-blue-50); --gio-color-action-soft-hover: var(--gio-blue-100); --gio-color-action-ring: rgba(37, 99, 235, 0.35); /* Accent — amber (sparingly: featured plan, AI feedback chip, hero highlight) */ --gio-color-accent: var(--gio-amber-500); --gio-color-accent-hover: var(--gio-amber-600); --gio-color-accent-soft: var(--gio-amber-50); --gio-color-accent-strong: var(--gio-amber-700); --gio-color-accent-ring: rgba(245, 158, 11, 0.35); /* Semantic states */ --gio-color-success: var(--gio-success-600); --gio-color-success-soft: var(--gio-success-100); --gio-color-warning: var(--gio-warning-600); --gio-color-warning-soft: var(--gio-warning-100); --gio-color-danger: var(--gio-danger-600); --gio-color-danger-soft: var(--gio-danger-100); --gio-color-info: var(--gio-info-600); --gio-color-info-soft: var(--gio-info-100); /* Focus ring */ --gio-focus-ring: 0 0 0 3px var(--gio-color-action-ring); --gio-focus-ring-accent: 0 0 0 3px var(--gio-color-accent-ring); /* Shadows — light */ --gio-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --gio-shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --gio-shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --gio-shadow-lg: 0 18px 36px -12px rgba(15, 23, 42, 0.18), 0 4px 8px -2px rgba(15, 23, 42, 0.06); --gio-shadow-xl: 0 28px 56px -16px rgba(15, 23, 42, 0.22), 0 8px 16px -4px rgba(15, 23, 42, 0.08); /* Skill accents (semantic alias) */ --gio-color-skill-listening: var(--gio-skill-listening); --gio-color-skill-reading: var(--gio-skill-reading); --gio-color-skill-writing: var(--gio-skill-writing); --gio-color-skill-speaking: var(--gio-skill-speaking); } /* ----------------------------------------------------------- SEMANTICS — DARK ----------------------------------------------------------- */ :root[data-theme="dark"] { /* Surfaces — deeper navy ink, layered */ --gio-color-bg: #0A1224; --gio-color-bg-subtle: #0E172A; --gio-color-surface: #131F3E; --gio-color-surface-alt: #182A52; --gio-color-surface-inverse: #FFFFFF; /* Text */ --gio-color-text: #E2E8F0; --gio-color-text-strong: #F8FAFC; --gio-color-text-muted: #94A3B8; --gio-color-text-faint: #64748B; --gio-color-text-disabled: #475569; --gio-color-text-on-action: #FFFFFF; --gio-color-text-on-accent: #1A1207; /* dark ink on amber */ --gio-color-text-link: #60A5FA; --gio-color-text-inverse: var(--gio-navy-900); /* Borders / dividers — subtle on dark */ --gio-color-border: rgba(255, 255, 255, 0.10); --gio-color-border-strong: rgba(255, 255, 255, 0.16); --gio-color-border-muted: rgba(255, 255, 255, 0.06); --gio-color-divider: rgba(255, 255, 255, 0.08); /* Action — primary (blue, slightly lighter for contrast on dark) */ --gio-color-action: var(--gio-blue-500); --gio-color-action-hover: var(--gio-blue-400); --gio-color-action-active: var(--gio-blue-600); --gio-color-action-soft: rgba(59, 130, 246, 0.12); --gio-color-action-soft-hover: rgba(59, 130, 246, 0.20); --gio-color-action-ring: rgba(96, 165, 250, 0.45); /* Accent — amber (lighter shade, ink-on-amber for AA contrast) */ --gio-color-accent: var(--gio-amber-400); --gio-color-accent-hover: var(--gio-amber-500); --gio-color-accent-soft: rgba(245, 158, 11, 0.16); --gio-color-accent-strong: var(--gio-amber-500); --gio-color-accent-ring: rgba(251, 191, 36, 0.45); /* Semantic states */ --gio-color-success: var(--gio-success-500); --gio-color-success-soft: rgba(16, 185, 129, 0.16); --gio-color-warning: var(--gio-warning-500); --gio-color-warning-soft: rgba(245, 158, 11, 0.16); --gio-color-danger: var(--gio-danger-500); --gio-color-danger-soft: rgba(239, 68, 68, 0.16); --gio-color-info: var(--gio-info-500); --gio-color-info-soft: rgba(14, 165, 233, 0.16); /* Focus ring (brighter on dark) */ --gio-focus-ring: 0 0 0 3px var(--gio-color-action-ring); --gio-focus-ring-accent: 0 0 0 3px var(--gio-color-accent-ring); /* Shadows — dark (heavier, longer) */ --gio-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30); --gio-shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.30); --gio-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.30); --gio-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 6px 12px -4px rgba(0, 0, 0, 0.35); --gio-shadow-xl: 0 36px 72px -20px rgba(0, 0, 0, 0.65), 0 10px 20px -6px rgba(0, 0, 0, 0.40); /* Skill accents — desaturate slightly for dark */ --gio-color-skill-listening: #A78BFA; --gio-color-skill-reading: #FB923C; --gio-color-skill-writing: #60A5FA; --gio-color-skill-speaking: #2DD4BF; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { :root { --gio-dur-fast: 0ms; --gio-dur-med: 0ms; --gio-dur-slow: 0ms; } }