/* ========================================================================== Biletstore — Design Tokens Figma: Primitives / Layout / Theme koleksiyonlarından birebir üretildi. Ekranlarda sadece Theme token'ları kullanılır; primitive'ler doğrudan çağrılmaz. Tema değişimi ile olur. ========================================================================== */ :root { /* --- PRIMITIVES: accent (Biletstore Kırmızısı) ------------------------- */ --accent-50: #FFF1F3; --accent-100: #FFE0E5; --accent-200: #FFC2CC; --accent-300: #FF7A8C; --accent-400: #F04A63; --accent-500: #DC0B2D; --accent-600: #BC0827; --accent-700: #97071F; --accent-800: #720518; --accent-900: #4E0311; --accent-950: #2C020A; --accent-soft-alpha: rgba(220, 11, 45, .17); /* --- PRIMITIVES: grey -------------------------------------------------- */ --grey-25: #F7F7F9; --grey-50: #FFFFFF; --grey-100: #F2F2F5; --grey-150: #ECECF1; --grey-200: #E3E3E9; --grey-300: #D6D6DE; --grey-400: #9A9AA4; --grey-500: #7E7E85; --grey-600: #3C3C40; --grey-700: #2B2B2E; --grey-800: #1F1F21; --grey-900: #161617; --grey-990: #131315; /* --- PRIMITIVES: semantic --------------------------------------------- */ --semantic-success: #22C55E; --semantic-success-soft: rgba(34,197,94,.12); --semantic-error: #FF5A5F; --semantic-error-soft: rgba(255,90,95,.15); --semantic-warning: #F59E0B; --semantic-warning-soft: rgba(245,158,11,.14); --semantic-info: #60A5FA; --semantic-info-soft: rgba(96,165,250,.12); /* --- LAYOUT ----------------------------------------------------------- */ --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.12); --shadow-md: 0 2px 6px -1px rgba(0,0,0,.14), 0 4px 10px -2px rgba(0,0,0,.10); --shadow-lg: 0 4px 12px -2px rgba(0,0,0,.16), 0 10px 24px -6px rgba(0,0,0,.12); --shadow-xl: 0 8px 24px -4px rgba(0,0,0,.20), 0 20px 48px -12px rgba(0,0,0,.16); --focus-accent: 0 0 0 2px rgba(220,11,45,.28); /* pembe halo yok, ince halka */ /* --- THEME: Dark (varsayılan) ----------------------------------------- */ --surface-canvas: var(--grey-900); --surface-raised: var(--grey-800); --surface-overlay: var(--grey-700); --surface-sunken: var(--grey-990); --surface-inverse: var(--grey-50); --text-primary: var(--grey-50); --text-secondary: var(--grey-300); --text-muted: var(--grey-500); --text-inverse: var(--grey-990); --text-accent: var(--accent-400); --text-on-accent: var(--grey-50); --border-subtle: var(--grey-700); --border-default: var(--grey-600); --border-strong: var(--grey-500); --border-accent: var(--accent-500); --accent-solid: var(--accent-500); --accent-hover: var(--accent-400); --accent-soft: var(--accent-soft-alpha); --status-success: var(--semantic-success); --status-success-soft: var(--semantic-success-soft); --status-error: var(--semantic-error); --status-error-soft: var(--semantic-error-soft); --status-warning: var(--semantic-warning); --status-warning-soft: var(--semantic-warning-soft); --status-info: var(--semantic-info); --status-info-soft: var(--semantic-info-soft); /* --- TYPOGRAPHY ------------------------------------------------------- */ --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* --- THEME: Light --------------------------------------------------------- */ [data-theme="light"] { --surface-canvas: var(--grey-150); --surface-raised: var(--grey-25); /* kartlar, header, footer — saf beyaz yok */ --surface-overlay: var(--grey-200); --surface-sunken: var(--grey-200); --surface-inverse: var(--grey-990); --text-primary: var(--grey-900); --text-secondary: var(--grey-600); --text-muted: var(--grey-500); --text-inverse: var(--grey-50); --text-accent: var(--accent-600); --border-subtle: var(--grey-200); --border-default: var(--grey-300); --border-strong: var(--grey-400); --accent-hover: var(--accent-600); --accent-soft: rgba(220,11,45,.08); /* pembe #FFF1F3 değil, alfa kırmızı */ --shadow-sm: 0 1px 2px rgba(16,16,20,.06); --shadow-md: 0 2px 6px -1px rgba(16,16,20,.08), 0 4px 10px -2px rgba(16,16,20,.06); --shadow-lg: 0 4px 12px -2px rgba(16,16,20,.10), 0 10px 24px -6px rgba(16,16,20,.08); }