/* ========================================================================== AsYouShip — Jetons de design Une seule source pour les couleurs, les espacements, les rayons, les ombres, la typographie et le mouvement. Aucune valeur brute ailleurs dans le CSS. Charte : pack « AS YOU SHIP — Identité V1.0 » (octobre 2026), présentation « Philosophie du logo », p. 10. Trois couleurs, trois rôles : vert profond #0D2624 — ancrer : la structure, les données ; vert menthe #3CD190 — activer : le repère, l'accent ; ivoire #FBF9F7 — faire respirer : l'espace, la lisibilité. Le reste de la palette est décliné de ces trois valeurs. La menthe ne porte jamais de texte sur un fond clair (1,96:1) : elle marque, elle souligne, ou elle colore un fond sous un texte vert profond (8,1:1). ========================================================================== */ :root { /* --- Charte : valeurs fixes, que le thème ne surcharge pas ------------- */ --ays-brand-deep: #0D2624; --ays-brand-mint: #3CD190; --ays-brand-ivory: #FBF9F7; /* --- Encre et neutres : des gris teintés du vert profond -------------- */ --ays-ink: #0D2624; --ays-ink-soft: #17332F; --ays-slate-800: #1C312D; --ays-slate-700: #2E443F; /* texte courant, 10,4:1 sur blanc */ --ays-slate-600: #455A55; /* chapô, 7,4:1 */ --ays-slate-500: #5B6E69; /* texte secondaire, 5,4:1 */ --ays-slate-400: #64776F; /* texte discret (horodatages, numéros, libellés) : 4,8:1 sur blanc, 4,5:1 sur ivoire */ --ays-slate-300: #C5D1CD; --ays-slate-200: #DEE6E3; --ays-slate-100: #EEF2F0; --ays-canvas: #FBF9F7; /* ivoire */ --ays-white: #FFFFFF; /* --- Action -------------------------------------------------------------- | « cobalt » est un nom hérité : l'écran Thème de l'administration et toutes | les feuilles le lisent, il reste donc l'interface. Il porte désormais | l'échelle de la marque : vert profond pour ce sur quoi on clique, menthe | pour l'accent, teintes de menthe pour les fonds. */ --ays-cobalt: #0D2624; /* boutons principaux, éléments actifs */ --ays-cobalt-700: #24453F; /* survol : plus clair, le vert profond est déjà presque noir */ --ays-cobalt-300: #3CD190; /* accent : sur fond sombre, survol d'une bordure */ --ays-cobalt-100: #CDEEDD; --ays-cobalt-050: #EBF7F0; /* Un lien dans un texte se distingue de l'encre : menthe assombrie, 5,2:1. */ --ays-link: #0E7C4F; --ays-link-hover: #0B6B44; --ays-accent: var(--ays-brand-mint); /* --- Couleurs métier : ce sont celles des états réels du produit ------ */ --ays-cash: #3CD190; /* livré, encaissé, marge : la menthe */ --ays-cash-ink: #0E7C4F; /* même sens, contraste texte */ --ays-cash-050: #E5F6EC; --ays-cash-line: #BDE8D2; --ays-relance: #E9A23B; /* no reply, relance programmée */ --ays-relance-ink: #9A5B00; --ays-relance-050: #FDF3E3; --ays-relance-line: #F2D6A8; --ays-retour: #E5484D; /* retour, anomalie, annulation */ --ays-retour-ink: #B42318; --ays-retour-050: #FCECEB; --ays-retour-line: #F2C4BF; /* Information : un bleu-vert sourd, distinct de l'action et de l'encaissé. Mêmes valeurs que --info dans assets/portal/css/portal.css : un statut a la même teinte dans l'administration et dans l'espace client. */ --ays-info: #1F5F7A; /* 7,1:1 sur blanc */ --ays-info-050: #E8F1F4; --ays-info-line: #C3DCE5; /* --- Typographie --------------------------------------------------------- | Inter partout, comme les documents de la marque : titres gras et serrés, | texte courant régulier. Plus Jakarta Sans ne sert plus qu'au mot-symbole, | dont les formes rondes approchent le logotype officiel. */ --ays-font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ays-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ays-font-brand: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; --ays-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --ays-fs-display: clamp(2.35rem, 1.55rem + 2.5vw, 3.55rem); --ays-fs-h1: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem); --ays-fs-h2: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem); --ays-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); --ays-fs-h4: 1.125rem; --ays-fs-lead: clamp(1.03rem, 0.98rem + 0.35vw, 1.22rem); --ays-fs-body: 1rem; --ays-fs-sm: 0.9375rem; --ays-fs-xs: 0.8125rem; --ays-fs-eyebrow: 0.78rem; --ays-lh-tight: 1.08; --ays-lh-snug: 1.25; --ays-lh-body: 1.65; /* --- Rythme ----------------------------------------------------------- */ --ays-sp-1: 4px; --ays-sp-2: 8px; --ays-sp-3: 12px; --ays-sp-4: 16px; --ays-sp-5: 20px; --ays-sp-6: 24px; --ays-sp-7: 28px; /* appelé par la fenêtre de campagne, jamais défini jusqu'ici */ --ays-sp-8: 32px; --ays-sp-10: 40px; --ays-sp-12: 48px; --ays-sp-16: 64px; --ays-sp-20: 80px; --ays-sp-24: 96px; --ays-section-y: clamp(64px, 7vw, 122px); --ays-container: 1200px; --ays-gutter: clamp(20px, 4vw, 32px); --ays-measure: 68ch; /* --- Rayons : resserrés, la charte préfère les formes nettes ---------- */ --ays-r-sm: 6px; --ays-r-md: 10px; --ays-r-lg: 14px; --ays-r-xl: 20px; --ays-r-pill: 999px; /* --- Ombres : à peine visibles, teintées du vert profond -------------- */ --ays-sh-1: 0 1px 2px rgba(13, 38, 36, .05); --ays-sh-2: 0 1px 2px rgba(13, 38, 36, .04), 0 8px 20px -10px rgba(13, 38, 36, .10); --ays-sh-3: 0 2px 6px rgba(13, 38, 36, .05), 0 22px 44px -20px rgba(13, 38, 36, .18); --ays-sh-glow: 0 1px 2px rgba(13, 38, 36, .14); /* ex-halo coloré : la charte est à plat */ --ays-ring: 0 0 0 3px rgba(60, 209, 144, .45); /* --- Mouvement -------------------------------------------------------- */ --ays-ease: cubic-bezier(.16, 1, .3, 1); --ays-ease-out: cubic-bezier(.22, .61, .36, 1); --ays-t-fast: .18s; --ays-t-base: .3s; --ays-t-slow: .7s; /* --- Plans ------------------------------------------------------------ */ --ays-z-nav: 1030; --ays-z-sticky: 1020; --ays-z-overlay: 1050; }