| 1 | /* SquadScope design tokens — Editorial Trend Report, 2026-05-25 */ |
| 2 | :root { |
| 3 | color-scheme: light dark; |
| 4 | |
| 5 | --color-bg: #FAFAFA; |
| 6 | --color-surface: #FFFFFF; |
| 7 | --color-text: #1A1A1A; |
| 8 | --color-text-muted: #5C5C5C; |
| 9 | --color-accent: #0066CC; |
| 10 | --color-accent-hover: #004C99; |
| 11 | --color-accent-muted: #E6F0FA; |
| 12 | --color-border: #E0E0E0; |
| 13 | --color-danger: #CC3300; |
| 14 | --color-success: #1A8754; |
| 15 | --color-code-bg: #F5F5F5; |
| 16 | --color-code-block-bg: #1A1D21; |
| 17 | --color-code-text: #E8E8E8; |
| 18 | --color-copy-text: #FFFFFFCC; |
| 19 | --color-copy-bg: #4E4E4ECC; |
| 20 | |
| 21 | --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| 22 | --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| 23 | --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", monospace; |
| 24 | |
| 25 | --text-xs: 0.75rem; |
| 26 | --text-sm: 0.875rem; |
| 27 | --text-base: 1rem; |
| 28 | --text-lg: 1.125rem; |
| 29 | --text-xl: 1.375rem; |
| 30 | --text-2xl: 1.75rem; |
| 31 | --text-3xl: 2.25rem; |
| 32 | --text-4xl: 3rem; |
| 33 | |
| 34 | --space-1: 0.25rem; |
| 35 | --space-2: 0.5rem; |
| 36 | --space-3: 1rem; |
| 37 | --space-4: 1.5rem; |
| 38 | --space-5: 2rem; |
| 39 | --space-6: 3rem; |
| 40 | --space-7: 4rem; |
| 41 | --space-8: 5rem; |
| 42 | --space-9: 6rem; |
| 43 | --space-10: 7rem; |
| 44 | --space-11: 8rem; |
| 45 | --space-12: 9rem; |
| 46 | --space-13: 10rem; |
| 47 | --space-14: 11rem; |
| 48 | --space-15: 12rem; |
| 49 | --space-16: 13rem; |
| 50 | |
| 51 | --radius-sm: 4px; |
| 52 | --radius-md: 8px; |
| 53 | --radius-lg: 12px; |
| 54 | --radius-full: 9999px; |
| 55 | |
| 56 | --size-header-height: 4rem; |
| 57 | --size-icon-sm: 1rem; |
| 58 | --size-icon-md: 1.5rem; |
| 59 | --size-logo-mark: 1.75rem; |
| 60 | --size-focus-ring: 0.1875rem; |
| 61 | --size-border-thin: 1px; |
| 62 | --z-header: 50; |
| 63 | --z-overlay: 100; |
| 64 | |
| 65 | --tracking-tight: -0.02em; |
| 66 | --tracking-nav: 0.01em; |
| 67 | |
| 68 | --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); |
| 69 | --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07); |
| 70 | --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1); |
| 71 | |
| 72 | --leading-tight: 1.2; |
| 73 | --leading-normal: 1.5; |
| 74 | --leading-relaxed: 1.65; |
| 75 | |
| 76 | --prose-measure: 68ch; |
| 77 | } |
| 78 | |
| 79 | @media (prefers-color-scheme: dark) { |
| 80 | :root:not([data-theme]) { |
| 81 | --color-bg: #0D0D0D; |
| 82 | --color-surface: #1A1A1A; |
| 83 | --color-text: #E8E8E8; |
| 84 | --color-text-muted: #9C9C9C; |
| 85 | --color-accent: #4DA3FF; |
| 86 | --color-accent-hover: #80BFFF; |
| 87 | --color-accent-muted: #1A2633; |
| 88 | --color-border: #2E2E2E; |
| 89 | --color-danger: #FF6B4A; |
| 90 | --color-success: #4ADE80; |
| 91 | --color-code-bg: #24262B; |
| 92 | --color-code-block-bg: #1A1A1A; |
| 93 | --color-code-text: #E8E8E8; |
| 94 | --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); |
| 95 | --shadow-md: 0 4px 6px rgb(0 0 0 / 0.3); |
| 96 | --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3); |
| 97 | } |
| 98 | } |
| 99 | |
| 100 | [data-theme="dark"] { |
| 101 | color-scheme: dark; |
| 102 | |
| 103 | --color-bg: #0D0D0D; |
| 104 | --color-surface: #1A1A1A; |
| 105 | --color-text: #E8E8E8; |
| 106 | --color-text-muted: #9C9C9C; |
| 107 | --color-accent: #4DA3FF; |
| 108 | --color-accent-hover: #80BFFF; |
| 109 | --color-accent-muted: #1A2633; |
| 110 | --color-border: #2E2E2E; |
| 111 | --color-danger: #FF6B4A; |
| 112 | --color-success: #4ADE80; |
| 113 | --color-code-bg: #24262B; |
| 114 | --color-code-block-bg: #1A1A1A; |
| 115 | --color-code-text: #E8E8E8; |
| 116 | --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); |
| 117 | --shadow-md: 0 4px 6px rgb(0 0 0 / 0.3); |
| 118 | --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3); |
| 119 | } |
| 120 | |
| 121 | [data-theme="light"] { |
| 122 | color-scheme: light; |
| 123 | } |
| 124 | |
| 125 | html { |
| 126 | font-size: 16px; |
| 127 | } |
| 128 | |
| 129 | /* Short aliases preserve the proposal vocabulary for future phases. */ |
| 130 | :root { |
| 131 | --bg: var(--color-bg); |
| 132 | --surface: var(--color-surface); |
| 133 | --text: var(--color-text); |
| 134 | --text-muted: var(--color-text-muted); |
| 135 | --accent: var(--color-accent); |
| 136 | --accent-hover: var(--color-accent-hover); |
| 137 | --accent-muted: var(--color-accent-muted); |
| 138 | --border-token: var(--color-border); |
| 139 | --danger: var(--color-danger); |
| 140 | --success: var(--color-success); |
| 141 | } |