/* ============================================================================ Cobalt V5 — theme.css (valeurs RÉELLES, light + dark) Source : export Figma « Token Couleurs / Typographies / Autres Tokens ». Couleurs, typo, espacements, radius, icônes, ombres, motion : EXACTS. Thème sombre : ajouter data-theme="dark" sur . ============================================================================ */ :root { /* ---- Neutral ---- */ --color-neutral-content-strong: #27272B; --color-neutral-content-medium: #4F4F56; --color-neutral-border-strong: #AAAAB6; --color-neutral-border-medium: #E2E2E9; --color-neutral-background-strong: #F6F6F9; /* éléments posés */ --color-neutral-background-medium: #FFFFFF; /* fond de page */ --color-neutral-background-soft: #F0F0F4; /* retrait / creusé */ /* ---- Brand (Docaposte) ---- */ --color-brand-content: #0000FF; --color-brand-decoration: #84AAFF; --color-brand-background: #EAF1FF; /* ---- Status ---- */ --color-status-content-success: #007F00; --color-status-background-success: #E2F6E2; --color-status-background-success-accent: #008800; --color-status-content-warning: #C24100; --color-status-background-warning: #FFEEDD; --color-status-background-warning-accent: #CE4600; --color-status-content-error: #D91414; --color-status-background-error: #FFEDEB; --color-status-background-error-accent: #E71616; --color-status-content-information: #006BD4; --color-status-background-information: #E5F2FF; --color-status-background-information-accent: #0072E2; --color-status-content-all-accent: #FFFFFF; /* ---- Additional (color1=turquoise, 2=purple, 3=red, 4=olive) ---- */ --color-additional-content-color1: #007C60; --color-additional-background-color1: #DBF7F0; --color-additional-background-color1-accent: #0CFFC6; --color-additional-content-color2: #9528FF; --color-additional-background-color2: #F6EDFF; --color-additional-background-color2-accent: #BF7CFF; --color-additional-content-color3: #D8142D; --color-additional-background-color3: #FFEDEC; --color-additional-background-color3-accent: #FF5657; --color-additional-content-color4: #6C7300; --color-additional-background-color4: #F5F4BA; --color-additional-background-color4-accent: #FFFF80; --color-additional-content-all-accent: #27272B; /* ---- Global ---- */ --color-global-content-link: #0000FF; --color-global-border-focus: #365AFF; --color-global-all-disabled-strong: #AAAAB6; --color-global-all-disabled-soft: #E2E2E9; --color-global-overlay-medium: rgba(23, 23, 26, 0.32); /* ---- Action / Primary ---- */ --color-action-primary-content-default: #FFFFFF; --color-action-primary-content-interacting: #FFFFFF; --color-action-primary-border-default: transparent; --color-action-primary-border-interacting: transparent; --color-action-primary-background-default: #0000FF; --color-action-primary-background-interacting: #2A49FF; /* ---- Action / Secondary ---- */ --color-action-secondary-content-default: #0000FF; --color-action-secondary-content-interacting: #2A49FF; --color-action-secondary-border-default: transparent; --color-action-secondary-border-interacting: transparent; --color-action-secondary-background-default: rgba(144, 144, 154, 0.12); --color-action-secondary-background-interacting: rgba(87, 140, 255, 0.12); /* ---- Action / Tertiary (ghost) ---- */ --color-action-tertiary-content-default: #0000FF; --color-action-tertiary-content-interacting: #2A49FF; --color-action-tertiary-border-default: transparent; --color-action-tertiary-border-interacting: transparent; --color-action-tertiary-background-default: transparent; --color-action-tertiary-background-interacting: rgba(144, 144, 154, 0.12); /* ---- Selection / Primary ---- */ --color-selection-primary-content-default: #4F4F56; --color-selection-primary-content-interacting: #2A49FF; --color-selection-primary-content-selected: #FFFFFF; --color-selection-primary-border-default: #737380; --color-selection-primary-border-interacting: #2A49FF; --color-selection-primary-border-selected: transparent; --color-selection-primary-background-default: #FFFFFF; --color-selection-primary-background-interacting: rgba(87, 140, 255, 0.12); --color-selection-primary-background-selected: #3067FF; /* ---- Selection / Secondary ---- */ --color-selection-secondary-content-default: #62626F; --color-selection-secondary-content-interacting: #3D3D43; --color-selection-secondary-content-selected: #0000FF; --color-selection-secondary-border-default: transparent; --color-selection-secondary-border-interacting: transparent; --color-selection-secondary-border-selected: transparent; --color-selection-secondary-background-default: transparent; --color-selection-secondary-background-interacting: rgba(144, 144, 154, 0.12); --color-selection-secondary-background-selected: rgba(87, 140, 255, 0.12); /* ---- Edition (champs) ---- */ --color-edition-content-default: #27272B; --color-edition-content-interacting: #0000FF; --color-edition-border-default: #90909A; --color-edition-border-interacting: #3067FF; --color-edition-background-default: #FFFFFF; --color-edition-background-interacting: #FFFFFF; /* ---- Espacements ---- */ --number-spacing-none: 0; --number-spacing-large: 20px; --number-spacing-5xsmall: 2px; --number-spacing-xlarge: 24px; --number-spacing-4xsmall: 4px; --number-spacing-2xlarge: 32px; --number-spacing-3xsmall: 6px; --number-spacing-3xlarge: 40px; --number-spacing-2xsmall: 8px; --number-spacing-4xlarge: 48px; --number-spacing-xsmall: 10px; --number-spacing-5xlarge: 56px; --number-spacing-small: 12px; --number-spacing-6xlarge: 64px; --number-spacing-medium: 16px; --number-spacing-7xlarge: 80px; --number-spacing-8xlarge: 120px; /* ---- Radius : seuls none/3xsmall/round sont distincts ; le reste = 3xsmall (2px) ---- */ --number-radius-none: 0; --number-radius-3xsmall: 2px; --number-radius-2xsmall: var(--number-radius-3xsmall); --number-radius-xsmall: var(--number-radius-3xsmall); --number-radius-small: var(--number-radius-3xsmall); --number-radius-medium: var(--number-radius-3xsmall); --number-radius-large: var(--number-radius-3xsmall); --number-radius-xlarge: var(--number-radius-3xsmall); --number-radius-2xlarge: var(--number-radius-3xsmall); --number-radius-3xlarge: var(--number-radius-3xsmall); --number-radius-round: 9999px; /* ---- Tailles d'icônes ---- */ --number-size-icon-small: 12px; --number-size-icon-xlarge: 24px; --number-size-icon-medium: 16px; --number-size-icon-2xlarge: 32px; --number-size-icon-large: 20px; --number-size-icon-3xlarge: 40px; /* ---- Ombres ---- */ --effect-drop-none: 0 0 0 0 hsl(0 0% 100% / 0%); --effect-drop-small: 0 1px 3px 0 hsl(240 40% 16% / 8%); --effect-drop-medium: 0 5px 8px -3px hsl(240 40% 16% / 16%); --effect-drop-large: 0 13px 21px -8px hsl(240 40% 16% / 24%); /* ---- Motion ---- */ --motion-easing-none: cubic-bezier(0, 0, 1, 1); --motion-easing-enter: cubic-bezier(0.05, 0.2, 0.2, 1); --motion-easing-exit: cubic-bezier(0.5, 0.05, 0.7, 0.6); --motion-easing-move: cubic-bezier(0.3, 0.1, 0.1, 1); --motion-duration-none: 0ms; --motion-duration-fast: 150ms; --motion-duration-medium: 250ms; --motion-duration-slow: 350ms; --motion-duration-xslow: 450ms; } /* ============================ DARK MODE ============================ */ :root[data-theme="dark"] { --color-neutral-content-strong: #FFFFFF; --color-neutral-content-medium: #C6C6D0; --color-neutral-border-strong: #62626F; --color-neutral-border-medium: #3D3D43; --color-neutral-background-strong: #27272B; --color-neutral-background-medium: #17171A; --color-neutral-background-soft: #343439; --color-brand-content: #84AAFF; --color-brand-decoration: #578CFF; --color-brand-background: #212AA7; --color-status-content-success: #41C441; --color-status-background-success: #004900; --color-status-background-success-accent: #008800; --color-status-content-warning: #F49435; --color-status-background-warning: #702500; --color-status-background-warning-accent: #CE4600; --color-status-content-error: #FF897F; --color-status-background-error: #820000; --color-status-background-error-accent: #E71616; --color-status-content-information: #5FB0FF; --color-status-background-information: #003D7A; --color-status-background-information-accent: #0072E2; --color-status-content-all-accent: #FFFFFF; --color-additional-content-color1: #00C296; --color-additional-background-color1: #004737; --color-additional-background-color1-accent: #0CFFC6; --color-additional-content-color2: #CA93FF; --color-additional-background-color2: #571D8C; --color-additional-background-color2-accent: #BF7CFF; --color-additional-content-color3: #FF8986; --color-additional-background-color3: #7E0722; --color-additional-background-color3-accent: #FF5657; --color-additional-content-color4: #ADB14B; --color-additional-background-color4: #3B4100; --color-additional-background-color4-accent: #FFFF80; --color-additional-content-all-accent: #27272B; --color-global-content-link: #84AAFF; --color-global-border-focus: #84AAFF; --color-global-all-disabled-strong: #90909A; --color-global-all-disabled-soft: #3D3D43; --color-global-overlay-medium: rgba(23, 23, 26, 0.32); --color-action-primary-content-default: #FFFFFF; --color-action-primary-content-interacting: #FFFFFF; --color-action-primary-background-default: #3067FF; --color-action-primary-background-interacting: #2A49FF; --color-action-secondary-content-default: #84AAFF; --color-action-secondary-content-interacting: #84AAFF; --color-action-secondary-background-default: rgba(145, 145, 145, 0.12); --color-action-secondary-background-interacting: rgba(87, 140, 255, 0.12); --color-action-tertiary-content-default: #84AAFF; --color-action-tertiary-content-interacting: #84AAFF; --color-action-tertiary-background-interacting: rgba(144, 144, 154, 0.12); --color-selection-primary-content-default: #E2E2E9; --color-selection-primary-content-interacting: #84AAFF; --color-selection-primary-border-default: #90909A; --color-selection-primary-border-interacting: #578CFF; --color-selection-primary-background-default: #27272B; --color-selection-primary-background-selected: #3067FF; --color-selection-secondary-content-default: #AAAAB6; --color-selection-secondary-content-interacting: #E2E2E9; --color-selection-secondary-content-selected: #84AAFF; --color-edition-content-default: #FFFFFF; --color-edition-content-interacting: #84AAFF; --color-edition-border-default: #6D6D6D; --color-edition-border-interacting: #84AAFF; --color-edition-background-default: #17171A; --color-edition-background-interacting: #17171A; --effect-drop-small: 0 1px 3px 0 hsl(0 0% 0% / 24%); --effect-drop-medium: 0 5px 8px -3px hsl(0 0% 0% / 48%); --effect-drop-large: 0 13px 21px -8px hsl(0 0% 0% / 72%); } /* ============================================================================ Helpers typographiques — Heading & Monoline = Montserrat ; Body = system-ui. ============================================================================ */ .t-heading-2xlarge { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 2rem; line-height: 2rem; letter-spacing: -0.05rem; } .t-heading-xlarge { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 2rem; letter-spacing: -0.043rem; } .t-heading-large { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.75rem; letter-spacing: -0.037rem; } .t-heading-medium { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.025rem; } .t-heading-small { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.022rem; } .t-heading-xsmall { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.25rem; letter-spacing: -0.02rem; } .t-body-large-regular { font-family: system-ui, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .t-body-large-bold { font-family: system-ui, sans-serif; font-weight: 500; font-size: 1rem; line-height: 1.5rem; } .t-body-medium-regular { font-family: system-ui, sans-serif; font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .t-body-medium-bold { font-family: system-ui, sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; } .t-body-small-regular { font-family: system-ui, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1rem; } .t-body-small-bold { font-family: system-ui, sans-serif; font-weight: 500; font-size: 0.75rem; line-height: 1rem; } .t-monoline-regular { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 0.9375rem; line-height: 1.5rem; letter-spacing: -0.014rem; white-space: nowrap; } .t-monoline-bold { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 0.8125rem; line-height: 1rem; letter-spacing: -0.008rem; white-space: nowrap; }