/* ============================================================ KITO DIGITAL — tokens.css Toutes les variables de la charte graphique, thème sombre ET thème clair. C'est LE seul endroit où une couleur, une police, un espacement ou un rayon se définit. Si une valeur n'est pas ici, elle ne devrait pas exister. ============================================================ */ :root { /* ── Couleurs principales ── */ --ow-primary: #7C5CFF; --ow-accent: #2EE5FF; /* ── Arrière-plans ── */ --ow-bg: #070A12; --ow-bg-secondary: #0B1020; --ow-bg-tertiary: #0D1225; /* ── Texte ── */ --ow-text: #EAF0FF; --ow-text-secondary: #94A3B8; --ow-muted: #64748B; /* ── Surfaces / Bordures ── */ --ow-card: #111827; --ow-card-hover: #161f35; --ow-border: rgba(255, 255, 255, 0.08); --ow-border-accent: rgba(124, 92, 255, 0.25); --ow-border-hover: rgba(124, 92, 255, 0.5); /* ── Glow ── */ --ow-glow: rgba(124, 92, 255, 0.25); --ow-glow-accent: rgba(46, 229, 255, 0.20); --ow-glow-strong: rgba(124, 92, 255, 0.4); /* ── Dégradés ── */ --ow-gradient: linear-gradient(135deg, #7C5CFF, #2EE5FF); --ow-gradient-subtle: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(46,229,255,0.10)); --ow-edge-gradient: linear-gradient(90deg, transparent, #7C5CFF, #2EE5FF, transparent); /* ── Surfaces spécifiques components (remplacent les hardcodés) ── */ --ow-header-bg: rgba(7, 10, 18, 0.85); --ow-mobile-menu-bg: rgba(7, 10, 18, 0.98); --ow-social-bg: rgba(255, 255, 255, 0.02); --ow-tag-bg: rgba(255, 255, 255, 0.03); --ow-input-bg: rgba(255, 255, 255, 0.04); --ow-nl-form-card-bg: rgba(255, 255, 255, 0.04); --ow-nl-form-card-border: rgba(255, 255, 255, 0.10); --ow-nl-section-bg: #070A12; /* Portfolio gradient overlay */ --ow-portfolio-overlay: rgba(7, 10, 18, 0.92); --ow-portfolio-overlay-mid: rgba(7, 10, 18, 0.5); /* Code blocks */ --ow-code-bg: #0B1020; /* ── Rayons ── */ --radius: 20px; --radius-sm: 12px; --radius-xs: 8px; --radius-full: 9999px; /* ── Espacement ── */ --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4.5rem; --spacing-3xl: 7rem; --container-padding: clamp(1.25rem, 4vw, 3rem); --wide-width: min(1200px, 95vw); /* ── Typographie ── */ --font-primary: 'Syne', ui-sans-serif, system-ui, sans-serif; --font-secondary: 'DM Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem; /* Titre du hero d'accueil. Plafond ramené de 5.5rem à 4.5rem : à 88 px, l'accroche occupait quatre lignes sur un grand écran. */ --fs-hero: clamp(2.5rem, 4.5vw + 1rem, 4.5rem); /* ── ÉCHELLE DES TITRES ──────────────────────────────────────────────── Un seul plafond par niveau, pour tout le site. Toute nouvelle règle de titre doit s'y rattacher plutôt que d'inventer sa propre valeur. h1 accueil ......... --fs-hero (4.5rem) h1 de page ......... .page-hero .section-title (3.25rem) h2 de section ...... .section-title (2.75rem) h2 d'encart ........ .cta-card .section-title (2.50rem) h3 de carte ........ --fs-xl (1.25rem) h3 secondaire ...... --fs-base (1.00rem) ──────────────────────────────────────────────────────────────────── */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-relaxed: 1.75; /* ── Ombres ── */ --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 30px var(--ow-glow); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--ow-border-accent); /* ── Effets ── */ --blur: blur(24px) saturate(180%); --blur-sm: blur(12px) saturate(150%); /* ── Transitions ── */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s ease; /* ── Layout ── */ --header-height: 72px; --section-gap: clamp(5rem, 10vw, 9rem); /* ── États (validation, alertes) ── Contraste vérifié sur --ow-bg dans les deux thèmes. */ --ow-error: #FF6B70; --ow-success: #34D399; --ow-warning: #FBBF24; color-scheme: dark; } /* ============================================================ LIGHT MODE — data-theme="light" (Le JS applique cet attribut sur ) ============================================================ */ [data-theme="light"] { /* ── États ── */ --ow-error: #C62A2F; --ow-success: #047857; --ow-warning: #92400E; /* ── Arrière-plans ── */ --ow-bg: #F2F4FC; --ow-bg-secondary: #E8EBF7; --ow-bg-tertiary: #DEE2F2; /* ── Surfaces ── */ --ow-card: #FFFFFF; --ow-card-hover: #F7F8FF; /* ── Texte ── */ --ow-text: #0F1525; --ow-text-secondary: #4B5A7A; --ow-muted: #7B8DB0; /* ── Bordures ── */ --ow-border: rgba(15, 21, 37, 0.10); --ow-border-accent: rgba(124, 92, 255, 0.30); --ow-border-hover: rgba(124, 92, 255, 0.55); /* ── Glow atténué ── */ --ow-glow: rgba(124, 92, 255, 0.10); --ow-glow-accent: rgba(46, 229, 255, 0.12); --ow-glow-strong: rgba(124, 92, 255, 0.20); /* ── Dégradés subtils ── */ --ow-gradient-subtle: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(46, 229, 255, 0.05)); /* ── Ombres ── */ --shadow: 0 20px 60px rgba(15, 21, 37, 0.10); --shadow-glow: 0 0 30px var(--ow-glow); --shadow-card: 0 4px 24px rgba(15, 21, 37, 0.08), 0 0 0 1px var(--ow-border-accent); /* ── Effets glass ── */ --blur: blur(24px) saturate(140%); --blur-sm: blur(12px) saturate(120%); /* ── Surfaces components ── */ --ow-header-bg: rgba(242, 244, 252, 0.90); --ow-mobile-menu-bg: rgba(242, 244, 252, 0.98); --ow-social-bg: rgba(15, 21, 37, 0.04); --ow-tag-bg: rgba(15, 21, 37, 0.04); --ow-input-bg: rgba(15, 21, 37, 0.03); --ow-nl-form-card-bg: rgba(15, 21, 37, 0.03); --ow-nl-form-card-border: rgba(15, 21, 37, 0.10); --ow-nl-section-bg: #F2F4FC; /* ── Surfaces pages ── */ --ow-portfolio-overlay: rgba(15, 21, 37, 0.75); --ow-portfolio-overlay-mid: rgba(15, 21, 37, 0.35); --ow-code-bg: #E8EBF7; color-scheme: light; } /* ── Support thème système (si pas de data-theme forcé) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --ow-error: #C62A2F; --ow-success: #047857; --ow-warning: #92400E; --ow-bg: #F2F4FC; --ow-bg-secondary: #E8EBF7; --ow-bg-tertiary: #DEE2F2; --ow-card: #FFFFFF; --ow-card-hover: #F7F8FF; --ow-text: #0F1525; --ow-text-secondary: #4B5A7A; --ow-muted: #7B8DB0; --ow-border: rgba(15, 21, 37, 0.10); --ow-border-accent: rgba(124, 92, 255, 0.30); --ow-border-hover: rgba(124, 92, 255, 0.55); --ow-glow: rgba(124, 92, 255, 0.10); --ow-glow-accent: rgba(46, 229, 255, 0.12); --ow-glow-strong: rgba(124, 92, 255, 0.20); --ow-gradient-subtle: linear-gradient(135deg, rgba(124, 92, 255, 0.08), rgba(46, 229, 255, 0.05)); --shadow: 0 20px 60px rgba(15, 21, 37, 0.10); --shadow-glow: 0 0 30px var(--ow-glow); --shadow-card: 0 4px 24px rgba(15, 21, 37, 0.08), 0 0 0 1px var(--ow-border-accent); --blur: blur(24px) saturate(140%); --blur-sm: blur(12px) saturate(120%); --ow-header-bg: rgba(242, 244, 252, 0.90); --ow-mobile-menu-bg: rgba(242, 244, 252, 0.98); --ow-social-bg: rgba(15, 21, 37, 0.04); --ow-tag-bg: rgba(15, 21, 37, 0.04); --ow-input-bg: rgba(15, 21, 37, 0.03); --ow-nl-form-card-bg: rgba(15, 21, 37, 0.03); --ow-nl-form-card-border: rgba(15, 21, 37, 0.10); --ow-nl-section-bg: #F2F4FC; --ow-portfolio-overlay: rgba(15, 21, 37, 0.75); --ow-portfolio-overlay-mid: rgba(15, 21, 37, 0.35); --ow-code-bg: #E8EBF7; color-scheme: light; } }