/* ========================================================================= Kara skin v3 — DESIGN TOKENS (source unique de vérité) « Le cabinet comme studio éditorial » : confiance tranquille, vert profond, l'espace comme luxe, le type comme image. Toutes les valeurs de marque vivent ici ; les composants ne référencent que des var(--ks-*). Aucune couleur en dur dans les composants. ========================================================================= */ :root { /* --------------------------------------------------------------------- COULEURS — PALETTE DE TRAVAIL « ENCRE NUIT » (provisoire, 100% en tokens). La couleur finale n'est pas figée : on rééquilibrera ici, gratuitement. Défaut = contexte clair (styleguide). `.kara-home` re-scope en sombre. Tous les ratios ci-dessous sont vérifiés AA. --------------------------------------------------------------------- */ --ks-forest: #0d2e22; /* vert profond — fonds premium / page home (crème: 14.16:1) */ --ks-forest-2: #0E3A2F; /* vert profond secondaire (bandes) */ --ks-emerald: #157A57; /* émeraude — accent / CTA (blanc dessus: 5.31:1) */ --ks-emerald-700: #0F6B4B; /* émeraude profond — hover/liens sur clair (6.28:1) */ --ks-sage: #AABEAF; /* sauge — texte atténué sur sombre (7.47:1 sur forest)*/ --ks-mint: #5FD3A5; /* menthe — accent / lien sur sombre (7.93:1 sur forest)*/ --ks-surface-dark: #143828; /* carte verte élevée (home) (crème: 12.46:1) */ --ks-line-dark: #21463a; /* filets sur sombre (home) */ --ks-paper: #fbfbf9; /* crème — surface claire / texte sur sombre */ --ks-ink: #15211C; /* encre — texte sur surfaces claires (16.01:1) */ /* Contexte clair (styleguide) */ --ks-surface: #eef3ee; /* surface claire (cartes, zones) */ --ks-line: #dde4dd; /* filets sur clair */ --ks-ink-soft: #3A4842; /* texte secondaire sur clair (~9:1) */ --ks-muted: #5B6B63; /* légendes / méta sur clair (~5.6:1) */ /* Sur fonds sombres */ --ks-on-dark: #fbfbf9; /* texte sur fonds sombres (14.16:1 sur forest) */ --ks-on-dark-soft: #C2CCC0; /* texte atténué sur sombre */ --ks-on-accent: #ffffff; /* texte SUR l'accent émeraude (blanc, 5.31:1) */ /* Rôles sémantiques (défaut = contexte clair) */ --ks-bg: var(--ks-paper); --ks-fg: var(--ks-ink); --ks-accent: var(--ks-emerald); --ks-accent-strong: var(--ks-emerald-700); --ks-link: #0F6B4B; /* émeraude profond — liens sur clair (6.28:1) */ --ks-link-hover: #157A57; --ks-focus: #0a5a3f; /* anneau de focus, contraste fort sur clair */ --ks-danger: #b42318; /* états d'erreur */ --ks-danger-soft: #fef3f2; /* --------------------------------------------------------------------- TYPOGRAPHIE --------------------------------------------------------------------- */ --ks-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --ks-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Échelle fluide (mobile-first). clamp(min, préféré, max). */ --ks-fs-display: clamp(2.25rem, 1.4rem + 4.6vw, 5rem); /* hero */ --ks-fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.75rem); --ks-fs-h2: clamp(1.75rem, 1.3rem + 2.0vw, 2.75rem); --ks-fs-h3: clamp(1.375rem, 1.15rem + 1.0vw, 1.875rem); --ks-fs-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem); --ks-fs-lead: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* chapô */ --ks-fs-body: 1.0625rem; /* 17px */ --ks-fs-sm: 0.9375rem; /* 15px */ --ks-fs-xs: 0.8125rem; /* 13px */ --ks-fs-kicker: 0.75rem; /* 12px — sur-titres/eyebrow */ --ks-lh-tight: 1.08; /* titres héros */ --ks-lh-heading: 1.16; /* titres courants */ --ks-lh-snug: 1.35; /* chapôs */ --ks-lh-body: 1.65; /* corps */ --ks-ls-tight: -0.022em; /* gros titres serrés */ --ks-ls-heading: -0.012em; --ks-ls-kicker: 0.16em; /* eyebrow espacé */ --ks-fw-regular: 400; --ks-fw-medium: 500; --ks-fw-semibold:600; --ks-fw-bold: 700; --ks-measure: 66ch; /* largeur de lecture confortable */ --ks-measure-sm: 54ch; /* --------------------------------------------------------------------- ESPACEMENT — base 4px, rythme cohérent --------------------------------------------------------------------- */ --ks-space-1: 0.25rem; /* 4 */ --ks-space-2: 0.5rem; /* 8 */ --ks-space-3: 0.75rem; /* 12 */ --ks-space-4: 1rem; /* 16 */ --ks-space-5: 1.5rem; /* 24 */ --ks-space-6: 2rem; /* 32 */ --ks-space-7: 3rem; /* 48 */ --ks-space-8: 4rem; /* 64 */ --ks-space-9: 6rem; /* 96 */ --ks-space-10: 8rem; /*128 */ /* --------------------------------------------------------------------- RAYONS --------------------------------------------------------------------- */ --ks-radius-sm: 8px; --ks-radius-md: 14px; --ks-radius-lg: 22px; --ks-radius-xl: 28px; --ks-radius-pill: 100px; --ks-radius-round:50%; /* --------------------------------------------------------------------- OMBRES — discrètes, teintées vert sombre (jamais de noir pur) --------------------------------------------------------------------- */ --ks-shadow-1: 0 1px 2px rgba(13,46,34,.06), 0 2px 8px rgba(13,46,34,.05); --ks-shadow-2: 0 8px 24px rgba(13,46,34,.08), 0 2px 6px rgba(13,46,34,.05); --ks-shadow-3: 0 18px 48px rgba(13,46,34,.12); /* --------------------------------------------------------------------- MOTION — discret, structuré --------------------------------------------------------------------- */ --ks-ease-out: cubic-bezier(.22, 1, .36, 1); --ks-ease-in-out: cubic-bezier(.65, 0, .35, 1); --ks-dur-fast: 120ms; --ks-dur: 200ms; --ks-dur-slow: 360ms; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --ks-container: 1200px; --ks-container-narrow: 760px; --ks-gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* Cible tactile minimale accessible */ --ks-tap-min: 44px; --ks-tap-min-inline: 24px; /* --------------------------------------------------------------------- BREAKPOINTS (référence — les media queries les répliquent en dur, CSS ne permettant pas var() dans @media). Mobile-first. --ks-bp-sm: 480px; --ks-bp-md: 768px; --ks-bp-lg: 1024px; --ks-bp-xl: 1280px; --------------------------------------------------------------------- */ }