Token Reference

/* Canon Design Tokens - Full Reference */

/* ═══════════════════════════════════════════════════════
   COLORS
   ═══════════════════════════════════════════════════════ */

/* Backgrounds */
--color-bg-pure: #000000;
--color-bg-elevated: #0a0a0a;
--color-bg-surface: #111111;
--color-bg-subtle: #1a1a1a;

/* Foregrounds */
--color-fg-primary: #ffffff;                    /* 21: 1 */
--color-fg-secondary: rgba(255, 255, 255, 0.8); /* 16.6: 1 */
--color-fg-tertiary: rgba(255, 255, 255, 0.6);  /* 12.24: 1 */
--color-fg-muted: rgba(255, 255, 255, 0.46);    /* 4.56: 1 AA */
--color-fg-subtle: rgba(255, 255, 255, 0.2);    /* 2.05: 1 */

/* Borders */
--color-border-default: rgba(255, 255, 255, 0.1);
--color-border-emphasis: rgba(255, 255, 255, 0.2);
--color-border-strong: rgba(255, 255, 255, 0.3);

/* Interactive */
--color-hover: rgba(255, 255, 255, 0.05);
--color-active: rgba(255, 255, 255, 0.1);
--color-focus: rgba(255, 255, 255, 0.5);        /* 5.28: 1 */

/* Semantic */
--color-success: #44aa44;                       /* 7.08: 1 */
--color-success-muted: rgba(68, 170, 68, 0.2);
--color-success-border: rgba(68, 170, 68, 0.3);

--color-error: #d44d4d;                         /* 4.97: 1 */
--color-error-muted: rgba(212, 77, 77, 0.2);
--color-error-border: rgba(212, 77, 77, 0.3);

--color-warning: #aa8844;                       /* 6.31: 1 */
--color-warning-muted: rgba(170, 136, 68, 0.2);
--color-warning-border: rgba(170, 136, 68, 0.3);

--color-info: #5082b9;                          /* 5.23: 1 */
--color-info-muted: rgba(80, 130, 185, 0.2);
--color-info-border: rgba(80, 130, 185, 0.3);

/* Overlays */
--color-overlay: rgba(0, 0, 0, 0.5);
--color-overlay-heavy: rgba(0, 0, 0, 0.7);

/* Data Visualization */
--color-data-1: #60a5fa;
--color-data-1-muted: rgba(96, 165, 250, 0.2);
--color-data-2: #22c55e;
--color-data-2-muted: rgba(34, 197, 94, 0.2);
--color-data-3: #c084fc;
--color-data-3-muted: rgba(192, 132, 252, 0.2);
--color-data-4: #fbbf24;
--color-data-4-muted: rgba(251, 191, 36, 0.2);
--color-data-5: #f472b6;
--color-data-5-muted: rgba(244, 114, 182, 0.2);
--color-data-6: #facc15;
--color-data-6-muted: rgba(250, 204, 21, 0.2);

/* Rank */
--color-rank-gold: #ca8a04;
--color-rank-gold-muted: rgba(202, 138, 4, 0.2);
--color-rank-bronze: #c2410c;
--color-rank-bronze-muted: rgba(194, 65, 12, 0.2);

/* ═══════════════════════════════════════════════════════
   SPACING (Golden Ratio φ = 1.618)
   ═══════════════════════════════════════════════════════ */

--space-xs: 0.5rem;     /* 8px */
--space-sm: 1rem;       /* 16px */
--space-md: 1.618rem;   /* ~26px */
--space-lg: 2.618rem;   /* ~42px */
--space-xl: 4.236rem;   /* ~68px */
--space-2xl: 6.854rem;  /* ~110px */

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */

/* Font Families */
--font-sans: system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, ';SF Mono', monospace;

/* Font Sizes (Fluid) */
--text-display-xl: clamp(3.5rem, 5vw + 2rem, 7rem);
--text-display: clamp(2.5rem, 4vw + 1.5rem, 5rem);
--text-h1: clamp(2rem, 3vw + 1rem, 3.5rem);
--text-h2: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
--text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
--text-body-lg: 1.125rem;   /* 18px */
--text-body: 1rem;          /* 16px */
--text-body-sm: 0.875rem;   /* 14px */
--text-caption: 0.75rem;    /* 12px */

/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

/* Line Heights */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;

/* Letter Spacing */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;

/* ═══════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════ */

/* Border Radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;

/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);

/* Z-Index */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;

/* Breakpoints (for reference, use in media queries) */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;

/* ═══════════════════════════════════════════════════════
   MOTION
   ═══════════════════════════════════════════════════════ */

/* Durations */
--duration-micro: 200ms;    /* Hover, toggles */
--duration-standard: 300ms; /* Modals, transitions */
--duration-complex: 500ms;  /* Orchestrated sequences */

/* Easing */
--ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);