/* * ThinkMe Press — Design Tokens v1.1.0 * Single source of truth. Components reference tokens only. */ :root { /* ── PRIMARY BLUE — from logo #3B97D3 ─────────────────── */ --tm-blue-50: #EBF5FB; --tm-blue-100: #CCE7F5; --tm-blue-200: #A8D5EE; --tm-blue-300: #77BCE3; --tm-blue-400: #3B97D3; /* ★ BRAND PRIMARY */ --tm-blue-500: #2980B9; --tm-blue-600: #1F6DA0; --tm-blue-700: #165A87; --tm-blue-800: #0D4570; --tm-blue-900: #0A3358; --tm-blue-950: #07213C; /* ── DARK BACKGROUNDS — warm navy ─────────────────────── */ --tm-dark-bg: #1a2c3d; /* ★ dark sections */ --tm-dark-bg-raised: #1e3347; /* cards on dark */ --tm-dark-bg-deep: #111f2d; /* deepest dark */ /* ── YELLOW — academic warmth ─────────────────────────── */ --tm-yellow-50: #FEFBE8; --tm-yellow-100: #FEF7D6; --tm-yellow-200: #FAE598; --tm-yellow-300: #FAD95E; --tm-yellow-400: #F5C842; /* ★ ACCENT */ --tm-yellow-500: #E8B220; --tm-yellow-600: #CDA010; --tm-yellow-700: #A07C00; /* WCAG AA on white */ --tm-yellow-800: #7A5C00; /* ── GREEN — CTA / learning growth ────────────────────── */ --tm-green-50: #EAF5EE; --tm-green-100: #C0DFC9; --tm-green-200: #8FC8A4; --tm-green-300: #5DB07F; --tm-green-400: #3DA066; --tm-green-500: #2E8B57; /* ★ CTA */ --tm-green-600: #277A4C; --tm-green-700: #1F6840; --tm-green-800: #185535; /* hover */ --tm-green-900: #0F3A22; /* ── PARCHMENT GRAY — structure ───────────────────────── */ --tm-gray-50: #F4F1EB; /* ★ PAGE BG */ --tm-gray-100: #E8E4DC; /* borders, dividers */ --tm-gray-200: #D4D0C8; --tm-gray-300: #B4B0A8; --tm-gray-400: #979390; --tm-gray-500: #7A7774; --tm-gray-600: #605D58; --tm-gray-700: #484540; --tm-gray-800: #31302C; --tm-gray-900: #1A1918; /* ── SEMANTIC ROLES ────────────────────────────────────── */ --tm-color-primary: var(--tm-blue-400); --tm-color-primary-light: var(--tm-blue-50); --tm-color-primary-mid: var(--tm-blue-100); --tm-color-primary-hover: var(--tm-blue-600); --tm-color-primary-dark: var(--tm-blue-800); --tm-color-accent: var(--tm-yellow-400); --tm-color-accent-light: var(--tm-yellow-100); --tm-color-accent-hover: var(--tm-yellow-500); --tm-color-accent-text: var(--tm-yellow-700); --tm-color-cta: var(--tm-green-500); --tm-color-cta-hover: var(--tm-green-800); --tm-color-cta-light: var(--tm-green-50); /* Surfaces */ --tm-surface-page: var(--tm-gray-50); --tm-surface-card: #FFFFFF; --tm-surface-subtle: var(--tm-gray-100); --tm-surface-dark: var(--tm-dark-bg); --tm-surface-dark-raised: var(--tm-dark-bg-raised); /* Borders */ --tm-border-default: var(--tm-gray-100); --tm-border-strong: var(--tm-gray-300); --tm-border-primary: rgba(59, 151, 211, 0.4); --tm-border-dark: rgba(255, 255, 255, 0.07); --tm-border-dark-mid: rgba(255, 255, 255, 0.12); --tm-border-accent: var(--tm-yellow-400); /* Text — light surfaces */ --tm-text-heading: var(--tm-blue-800); --tm-text-body: #2D3A4A; --tm-text-muted: var(--tm-gray-600); --tm-text-subtle: var(--tm-gray-400); --tm-text-placeholder: var(--tm-gray-400); --tm-text-link: var(--tm-blue-500); --tm-text-link-hover: var(--tm-blue-600); /* Text — dark surfaces */ --tm-text-on-dark: #ECF2F8; --tm-text-on-dark-body: #7BAFD4; --tm-text-on-dark-muted: #3D6280; --tm-text-on-dark-accent: var(--tm-yellow-400); /* Level badges */ --tm-level-primary-color: var(--tm-yellow-400); --tm-level-primary-text: var(--tm-yellow-700); --tm-level-primary-bg: var(--tm-yellow-100); --tm-level-middle-color: var(--tm-green-500); --tm-level-middle-text: var(--tm-green-800); --tm-level-middle-bg: var(--tm-green-50); --tm-level-secondary-color: var(--tm-blue-400); --tm-level-secondary-text: var(--tm-blue-700); --tm-level-secondary-bg: var(--tm-blue-50); /* Focus ring — brand blue */ --tm-focus-ring: 0 0 0 3px rgba(59, 151, 211, 0.35); /* ── TYPOGRAPHY ────────────────────────────────────────── */ --tm-font-display: 'Playfair Display', Georgia, serif; --tm-font-body: 'Source Serif 4', Georgia, serif; --tm-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --tm-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Arabic — swap via [dir="rtl"] */ --tm-font-display-ar: 'Amiri', serif; --tm-font-body-ar: 'Scheherazade New', serif; /* Type scale */ --tm-text-2xs: 0.625rem; /* 10px */ --tm-text-xs: 0.75rem; /* 12px */ --tm-text-sm: 0.875rem; /* 14px */ --tm-text-base: 1rem; /* 16px */ --tm-text-md: 1.0625rem; /* 17px — comfortable body */ --tm-text-lg: 1.125rem; /* 18px */ --tm-text-xl: 1.25rem; /* 20px */ --tm-text-2xl: 1.5rem; /* 24px */ --tm-text-3xl: 1.875rem; /* 30px */ --tm-text-4xl: 2.25rem; /* 36px */ --tm-text-5xl: 3rem; /* 48px */ --tm-text-6xl: 3.75rem; /* 60px */ --tm-text-7xl: 4.5rem; /* 72px */ /* Weights */ --tm-weight-light: 300; --tm-weight-regular: 400; --tm-weight-medium: 500; --tm-weight-semibold: 600; --tm-weight-bold: 700; /* Line heights */ --tm-leading-none: 1; --tm-leading-tight: 1.05; --tm-leading-snug: 1.15; --tm-leading-heading: 1.3; --tm-leading-normal: 1.5; --tm-leading-relaxed: 1.7; --tm-leading-loose: 1.9; /* Letter spacing */ --tm-tracking-tight: -0.02em; --tm-tracking-normal: 0em; --tm-tracking-wide: 0.04em; --tm-tracking-wider: 0.08em; --tm-tracking-widest: 0.14em; /* ── SPACING — 8px base grid ────────────────────────────── */ --tm-space-1: 0.25rem; /* 4px */ --tm-space-2: 0.5rem; /* 8px */ --tm-space-3: 0.75rem; /* 12px */ --tm-space-4: 1rem; /* 16px */ --tm-space-5: 1.25rem; /* 20px */ --tm-space-6: 1.5rem; /* 24px */ --tm-space-8: 2rem; /* 32px */ --tm-space-10: 2.5rem; /* 40px */ --tm-space-12: 3rem; /* 48px */ --tm-space-14: 3.5rem; /* 56px */ --tm-space-16: 4rem; /* 64px */ --tm-space-20: 5rem; /* 80px */ --tm-space-24: 6rem; /* 96px */ --tm-space-28: 7rem; /* 112px */ --tm-space-32: 8rem; /* 128px */ --tm-space-40: 10rem; /* 160px */ /* ── LAYOUT ────────────────────────────────────────────── */ --tm-container-max: 1200px; --tm-container-wide: 1400px; --tm-container-text: 720px; --tm-container-narrow: 560px; --tm-container-px: var(--tm-space-6); /* 24px default */ --tm-container-px-lg: var(--tm-space-10); /* 40px at 1400px+ */ --tm-nav-height: 64px; --tm-nav-height-mobile: 56px; --tm-ann-height: 34px; /* ── SHAPE ──────────────────────────────────────────────── */ --tm-radius-xs: 2px; --tm-radius-sm: 4px; --tm-radius-md: 6px; --tm-radius-lg: 12px; --tm-radius-xl: 20px; --tm-radius-full: 9999px; /* Shadows — brand blue tint, not arbitrary navy */ --tm-shadow-sm: 0 1px 3px rgba(59, 151, 211, 0.09), 0 1px 2px rgba(59, 151, 211, 0.05); --tm-shadow-md: 0 4px 16px rgba(59, 151, 211, 0.11), 0 2px 6px rgba(59, 151, 211, 0.06); --tm-shadow-lg: 0 8px 32px rgba(59, 151, 211, 0.13), 0 4px 12px rgba(59, 151, 211, 0.07); --tm-shadow-card: 0 2px 8px rgba(59, 151, 211, 0.08); --tm-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.30); /* ── TRANSITIONS ───────────────────────────────────────── */ --tm-transition-fast: 100ms ease; --tm-transition: 180ms ease; --tm-transition-slow: 300ms ease; --tm-transition-reveal: 480ms cubic-bezier(0.22, 1, 0.36, 1); /* ── Z-INDEX ────────────────────────────────────────────── */ --tm-z-base: 0; --tm-z-raised: 10; --tm-z-dropdown: 100; --tm-z-sticky: 200; --tm-z-overlay: 300; --tm-z-modal: 400; --tm-z-toast: 500; }