/* ============================================
   KA_Design System — Design Tokens
   Valeurs réelles extraites de KA_Library
   ============================================ */

/* ============================================
   Realist — police de marque (auto-hébergée dans /fonts, OpenType)
   Graisses utilisées dans le design system : 400 Regular, 500 Medium,
   700 Bold (+ 400 italic pour le style caption/regular-italic).
   Familles « Narrow » / « Wide » présentes dans /fonts mais non utilisées.
   ============================================ */
@font-face {
  font-family: 'Realist';
  src: url('../fonts/fonnts.com-Realist.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Realist';
  src: url('../fonts/fonnts.com-Realist_Medium.otf') format('opentype');
  font-weight: 500 600;   /* Figma nomme cette graisse « Medium » = 600 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Realist';
  src: url('../fonts/fonnts.com-Realist_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Realist';
  src: url('../fonts/fonnts.com-Realist_Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Surfaces --- */
  --surface-primary-default: #1C2D4B;
  --surface-secondary-default: #E5E7EB;
  --surface-secondary-hover: #D1D5DC;
  --surface-on-color: #FFFFFF;
  --surface-primary-on-color: #E0F1FE;
  --surface-default: #F3F4F6;

  /* --- Text --- */
  --text-primary-heading: #1C2D4B;
  --text-primary-body: #003E5F;
  --text-primary-placeholder: #6A7282;
  --text-secondary-body: #085684;
  --text-secondary-heading: #085684;
  --text-on-color-heading: #FFFFFF;
  --text-on-color-body: #FFFFFF;

  /* --- Border --- */
  --border-primary-default: #1C2D4B;
  --border-primary-on-color: #FFFFFF;
  --border-secondary-default: #6A7282;

  /* --- Semantic (status) — valeurs réelles Figma : surface / text / border / icon --- */
  --status-success-surface: #EDF7ED;
  --status-success-text: #2A6129;
  --status-success-border: #47A344;
  --status-success-icon: #47A344;

  --status-error-surface: #FEF2F2;
  --status-error-text: #C10007;
  --status-error-border: #FB2C36;
  --status-error-icon: #FB2C36;

  --status-warning-surface: #FFFBEB;
  --status-warning-text: #B45309;
  --status-warning-border: #F59E0B;
  --status-warning-icon: #F59E0B;

  --status-info-surface: #E0F1FE;
  --status-info-text: #003E5F;
  --status-info-border: #037CC2;
  --status-info-icon: #037CC2;

  /* --- Ramp: Cloud Burst (brand / primary) — DEFAULT = 600 --- */
  --cloud-burst-50:  #F1F8FD;
  --cloud-burst-100: #DEEEFB;
  --cloud-burst-200: #C5E3F8;
  --cloud-burst-300: #9ED1F2;
  --cloud-burst-400: #6FB7EB;
  --cloud-burst-500: #4E9AE3;
  --cloud-burst-600: #397FD7;
  --cloud-burst-700: #306BC5;
  --cloud-burst-800: #2C57A1;
  --cloud-burst-900: #294A7F;
  --cloud-burst-950: #1C2D4B;

  /* --- Ramp: Lochmara (secondary) — DEFAULT = 600 --- */
  --lochmara-50:  #F0F9FF;
  --lochmara-100: #E0F1FE;
  --lochmara-200: #BAE4FD;
  --lochmara-300: #7ED0FB;
  --lochmara-400: #39B8F7;
  --lochmara-500: #0F9FE8;
  --lochmara-600: #037CC2;
  --lochmara-700: #0465A0;
  --lochmara-800: #085684;
  --lochmara-900: #0D476D;
  --lochmara-950: #082D49;

  /* --- Ramp: Neutral — DEFAULT = 500 --- */
  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DC;
  --neutral-400: #99A1AF;
  --neutral-500: #6A7282;
  --neutral-600: #4A5565;
  --neutral-700: #364153;
  --neutral-800: #1E2939;

  /* --- Ramp: Green — DEFAULT = 600 --- */
  --green-50:  #EDF7ED;
  --green-100: #D8EED7;
  --green-200: #B1DEB0;
  --green-300: #8ACD88;
  --green-400: #64BD61;
  --green-500: #47A344;
  --green-600: #388236;
  --green-700: #2A6129;
  --green-800: #1C411B;
  --green-900: #0E200E;

  /* --- Ramp: Red — DEFAULT = 600 --- */
  --red-50:  #FEF2F2;
  --red-100: #FFE2E2;
  --red-200: #FFC9C9;
  --red-300: #FFA2A2;
  --red-400: #FF6467;
  --red-500: #FB2C36;
  --red-600: #E7000B;
  --red-700: #C10007;
  --red-800: #9F0712;
  --red-900: #82181A;

  /* --- Ramp: Ambre — DEFAULT = 600 --- */
  --ambre-50:  #FFFBEB;
  --ambre-100: #FEF3C7;
  --ambre-200: #FDE68A;
  --ambre-300: #FCD34D;
  --ambre-400: #FBBF24;
  --ambre-500: #F59E0B;
  --ambre-600: #D97706;
  --ambre-700: #B45309;
  --ambre-800: #92400E;
  --ambre-900: #78350F;

  /* --- Thematic (Klima-Agence categories) --- */
  --theme-biodiversite: #418D53;
  --theme-photovoltaique: #F7C646;
  --theme-chauffage: #EB983E;
  --theme-habitat: #E0340D;
  --theme-lifestyle: #E489B3;
  --theme-consommation: #6459A1;
  --theme-mobilite: #0D7B89;

  /* --- Energy classes (A+ → I) — KA_Library « Colors/Energy class » --- */
  --energy-a-plus: #03882A;
  --energy-a: #57A030;
  --energy-b: #A2BC2B;
  --energy-c: #D7D51C;
  --energy-d: #EDDF09;
  --energy-e: #FEBB08;
  --energy-f: #FF8709;
  --energy-g: #FA5508;
  --energy-h: #DF3012;
  --energy-i: #C10B17;

  /* --- Decorative tokens --- */
  --color-decorative-light-blue: #91D2F3;
  --color-decorative-green: #83BD56;
  --color-decorative-light-green: #CEDA51;
  --color-decorative-yellow: #FFF24B;
  --color-decorative-nude: #ECA692;

  /* --- Typography: product font (Realist — brand font, auto-hébergée) --- */
  /* Inter reste en secours si un fichier de graisse venait à manquer */
  --font-product: 'Realist', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* --- Typography: documentation site chrome --- */
  --font-doc: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', Consolas, monospace;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --- Radius (Figma Border Radius scale) --- */
  --radius-xs: 4px;      /* Border Radius/100 */
  --radius-sm: 8px;      /* Border Radius/300 */
  --radius-md: 10px;
  --radius-lg: 12px;     /* Border Radius/500 */
  --radius-xl: 14px;
  --radius-2xl: 16px;    /* Border Radius/600 */
  --radius-full: 999px;  /* Border Radius/round */
}