/* Lexik (le jeu du petit bac) -- design tokens. Source de verite pour couleurs, typographie, espacement, rayons et etats. Importe par l'application et par design-system/preview.html. Deux couches : 1. Primitives (--color-*) : l'inventaire des valeurs brutes. Le "quoi". 2. Semantique (le reste) : le role. Le "pour quoi faire". Regle : un composant se branche TOUJOURS sur la couche semantique, jamais directement sur une primitive. Orientation : l'application est a DOMINANTE SOMBRE, au sens ou tout le contenu vit sur du navy. Concretement : les CARTES sont navy (--background-primary), et elles flottent sur un fond de page clair (--background-inverse) qui porte le fond anime. `inverse` designe donc ce qui est derriere les cartes, pas une section secondaire. */ :root { /* ========================================================= 1. PRIMITIVES -- valeurs brutes, jamais dans un composant ========================================================= */ --color-navy: #16243F; --color-off-white: #FDFEFF; --color-slate: #2D3B55; --color-lemon: #FEF785; --color-cornflower: #7A9FF6; --color-coral: #F67A7A; /* ========================================================= 2. SEMANTIQUE -- ce que les composants utilisent ========================================================= */ /* ---- Fonds ---- */ --background-primary: var(--color-navy); /* surface des cartes (sombre) */ --background-inverse: var(--color-off-white); /* fond de page, derriere les cartes */ --background-secondary: var(--color-slate); /* surface (carte, tag, badge) */ --background-accent: var(--color-lemon); /* action, mise en avant */ --background-accent-secondary: var(--color-cornflower); /* second accent */ --background-alert: var(--color-coral); /* statut d'alerte (temps ecoule) */ /* ---- Contours (famille separee du texte, meme valeur pour l'instant) ---- */ --border-primary: var(--color-off-white); /* contour sur fond sombre */ --border-inverse: var(--color-navy); /* contour sur fond clair */ --border-muted: color-mix(in srgb, var(--border-primary), transparent 45%); /* contour discret (bouton secondaire d'un groupe) */ /* Epaisseur unique des contours de l'interface. */ --border-width: 1.5px; /* ---- Icones ---- Toutes dessinees sur la meme grille de 24, avec la meme epaisseur et des terminaisons arrondies, pour former une serie. Les traces vivent dans src/index.html (un seul jeu, appele par ). */ --icon-size: 24px; /* dans un bouton rond ou une zone dediee */ --icon-size-s: 18px; /* accompagne un libelle */ --icon-stroke: 2.5; /* en unites de la grille 24, pas en pixels */ /* ---- Textes et icones ---- */ --text-primary: var(--color-off-white); /* texte sur fond sombre */ --text-inverse: var(--color-navy); /* texte sur fond clair */ --text-on-accent: var(--color-navy); /* texte sur un accent (lemon ou cornflower) */ /* Deux crans d'attenuation, pas trois. `secondary` accompagne un titre sans s'effacer ; `muted` est franchement discret (legende, etiquette). */ --text-secondary: color-mix(in srgb, var(--text-primary), transparent 15%); --text-muted: color-mix(in srgb, var(--text-primary), transparent 30%); /* ========================================================= 3. ETATS -- intensite, facon Material 3. On ne stocke pas des couleurs d'etat, mais une intensite appliquee sur n'importe quelle couleur via color-mix(). Sert surtout aux survols des actions (boutons). ========================================================= */ --state-hover: 8%; --state-focus: 10%; --state-pressed: 12%; /* Sur une surface TRES CLAIRE (le citron), la meme intensite ne se voit presque pas : melanger 8% de sombre dans du quasi-blanc bouge peu. On double donc l'intensite pour obtenir le meme effet PERCU. */ --state-hover-on-light: 16%; --state-pressed-on-light: 24%; /* Anneau de focus clavier : seul signal visible pour qui navigue sans souris. Le citron ressort sur le navy comme sur le slate. */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ========================================================= 4. TYPOGRAPHIE ========================================================= */ --font-heading: "Signika", sans-serif; /* titres et lettre */ --font-body: "Lato", sans-serif; /* textes courants */ /* Echelle de taille. Progression reguliere, nommage par role. `headline` et `display` integrent leur propre responsive via clamp(). */ --font-size-label: 12px; --font-size-caption: 14px; --font-size-body: 16px; --font-size-body-large: 18px; /* texte courant mis en avant */ --font-size-title: 20px; --font-size-title-large: 24px; --font-size-headline: clamp(28px, 6vw, 38px); --font-size-hero: 44px; --font-size-display: clamp(96px, 32vw, 160px); --font-size-display-small: clamp(44px, 12vw, 88px); /* un MOT dans la zone de la lettre ("Pret ?") : il lui faut la meme presence, mais un mot est bien plus large qu'un caractere unique. */ /* ========================================================= 5. ESPACEMENT -- echelle en multiples de 4 (nom = valeur en px) ========================================================= */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-56: 56px; --space-64: 64px; /* ========================================================= 6. RAYONS ========================================================= */ --radius-s: 12px; --radius-m: 20px; --radius-l: 32px; --radius-xl: 44px; --radius-full: 999px; /* ========================================================= 7. LARGEURS -- paliers de largeur maximale d'une carte sur grand ecran. Le contenu decide du palier, pas l'ecran. ========================================================= */ --card-max-s: 560px; /* carte standard : accueil, reglage, jeu mobile */ --card-max-m: 1000px; /* deux colonnes : selection des categories */ --card-max-l: 1200px; /* deux colonnes larges : ecran de jeu */ --card-max-xl: 1800px; /* liste a parcourir : referentiel des categories */ /* ========================================================= 8. MOUVEMENT -- duree et courbe. Une transition se compose TOUJOURS d'une duree et d'une courbe de cette liste. Regle de duree : plus le mouvement est petit, plus il est court. Au-dela de 320ms une interface parait lente. Regle de courbe : `out` pour ce qui arrive ou repond a un clic (demarre vite, finit doucement) ; `in-out` pour ce qui se deplace d'un point A a un point B en restant a l'ecran. ========================================================= */ --duration-fast: 120ms; /* survol, etat presse, changement de couleur */ --duration-base: 200ms; /* apparition d'un element, ouverture d'un bloc */ --duration-slow: 320ms; /* moment marquant : le tirage de la lettre */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Decalage entre deux elements d'une meme serie qui apparaissent l'un apres l'autre (les categories relancees d'un coup). */ --stagger-step: 40ms; /* ========================================================= 9. DECORATIF -- fond anime de l'accueil (lettres et formes qui flottent). Usage STRICTEMENT decoratif, hors du systeme semantique. Consomme par src/js/background.js. ========================================================= */ /* Teintes decoratives, en plus des couleurs de marque */ --color-teal: #00C9BD; --color-slate-2: #4E5880; --color-pink: #FF9AF2; --color-violet: #6E69B3; --color-magenta: #B05DB4; --color-pine: #297D78; /* Palette des lettres du fond anime (9 teintes) */ --deco-letter-1: var(--color-lemon); --deco-letter-2: var(--color-teal); --deco-letter-3: var(--color-slate-2); --deco-letter-4: var(--color-cornflower); --deco-letter-5: var(--color-pink); --deco-letter-6: var(--color-coral); --deco-letter-7: var(--color-violet); --deco-letter-8: var(--color-magenta); --deco-letter-9: var(--color-pine); }