/* ============================================================
   OUEST-DIGIT · colors_and_type.css
   Core tokens for brand color, typography and semantic styles.
   ============================================================ */

/* ---------- FONTS ----------
   Titres : Barlow Condensed — compact, identitaire.
   Corps  : Barlow — lisible, harmonieux.
   Mono   : JetBrains Mono — inchangé. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ==============================
     BRAND CORE
     Navy + amber-yellow, drawn from the logo.
     ============================== */
  --od-navy-900: #151634;      /* Primary brand background (logo field) */
  --od-navy-800: #1D1F45;
  --od-navy-700: #272A58;
  --od-navy-600: #353974;
  --od-navy-500: #4F53A0;      /* Hover / lifted states */
  --od-navy-100: #E4E5F0;      /* Soft navy tint for backgrounds */
  --od-navy-050: #F3F4FA;      /* Subtle surface */

  --od-amber-600: #D49B00;
  --od-amber-500: #F2B600;     /* Primary accent (logo "DIGIT" + glyph) */
  --od-amber-400: #FFC933;     /* Hover */
  --od-amber-200: #FFE799;     /* Highlight bar, selection */
  --od-amber-050: #FFF6D6;     /* Soft fill */

  /* ==============================
     NEUTRALS (warm-cool balanced)
     ============================== */
  --od-white:   #FFFFFF;
  --od-ink-950: #0C0D1F;       /* Deepest text on light bg */
  --od-ink-800: #1F2033;
  --od-ink-700: #2F3148;
  --od-ink-500: #5A5D73;       /* Secondary text */
  --od-ink-400: #8A8DA3;       /* Tertiary / captions */
  --od-ink-300: #BDBFD1;       /* Borders (dark on dark) */
  --od-ink-200: #DCDEE8;       /* Borders on light */
  --od-ink-100: #EDEFF5;       /* Subtle divider */
  --od-ink-050: #F7F8FC;       /* Page background alt */

  /* ==============================
     SEMANTIC (security / status)
     Ouest-Digit is a security business; states must be unambiguous.
     ============================== */
  --od-success-500: #16A34A;   /* Alarme armée / système OK */
  --od-success-050: #E6F5EC;
  --od-warning-500: #F2B600;   /* Maps to amber; batterie faible, alerte mineure */
  --od-warning-050: #FFF6D6;
  --od-danger-500: #DC2626;    /* Intrusion, alarme déclenchée */
  --od-danger-050: #FBEAEA;
  --od-info-500:    #2563EB;   /* Télésurveillance connectée */
  --od-info-050:    #E6EEFB;

  /* ==============================
     SEMANTIC ROLES (prefer these in components)
     ============================== */
  --od-bg:          var(--od-white);
  --od-bg-alt:      var(--od-ink-050);
  --od-bg-dark:     var(--od-navy-900);
  --od-surface:     var(--od-white);
  --od-surface-dark: var(--od-navy-800);

  --od-fg:          var(--od-ink-950);   /* Primary text on light */
  --od-fg-on-dark:  var(--od-white);     /* Primary text on dark */
  --od-fg-muted:    var(--od-ink-500);
  --od-fg-subtle:   var(--od-ink-400);
  --od-fg-accent:   var(--od-amber-500);

  --od-border:      var(--od-ink-200);
  --od-border-dark: var(--od-navy-700);
  --od-divider:     var(--od-ink-100);

  --od-accent:      var(--od-amber-500);
  --od-accent-hover:var(--od-amber-400);
  --od-accent-fg:   var(--od-navy-900);  /* Text color ON amber (never white) */

  --od-focus-ring:  0 0 0 3px rgba(242, 182, 0, 0.45);

  /* ==============================
     RADII, SHADOWS, SPACING
     Moderate rounding (4–12px) — functional, not playful.
     ============================== */
  --od-radius-xs: 2px;
  --od-radius-sm: 4px;
  --od-radius-md: 8px;
  --od-radius-lg: 12px;
  --od-radius-xl: 20px;
  --od-radius-pill: 999px;

  --od-shadow-xs: 0 1px 2px rgba(21, 22, 52, 0.06);
  --od-shadow-sm: 0 2px 6px rgba(21, 22, 52, 0.08);
  --od-shadow-md: 0 8px 20px rgba(21, 22, 52, 0.10);
  --od-shadow-lg: 0 16px 40px rgba(21, 22, 52, 0.14);
  --od-shadow-amber: 0 8px 24px rgba(242, 182, 0, 0.30);

  --od-space-1: 4px;
  --od-space-2: 8px;
  --od-space-3: 12px;
  --od-space-4: 16px;
  --od-space-5: 24px;
  --od-space-6: 32px;
  --od-space-7: 48px;
  --od-space-8: 64px;
  --od-space-9: 96px;

  /* ==============================
     TYPOGRAPHY — FAMILIES
     ============================== */
  --od-font-display: 'Barlow Condensed', 'Oswald', 'Impact', system-ui, sans-serif;
  --od-font-body:    'Barlow', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --od-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ==============================
     TYPE SCALE (roles)
     Display = condensed all-caps headlines (hero, section starters).
     Heading = title-case condensed for page headings.
     Body    = standard Barlow.
     ============================== */
  --od-fs-hero:   clamp(48px, 7vw, 96px);
  --od-fs-h1:     clamp(36px, 4vw, 56px);
  --od-fs-h2:     clamp(28px, 3vw, 40px);
  --od-fs-h3:     22px;
  --od-fs-h4:     18px;
  --od-fs-body:   16px;
  --od-fs-small:  14px;
  --od-fs-micro:  12px;

  --od-lh-tight:   1.05;
  --od-lh-snug:    1.2;
  --od-lh-normal:  1.5;
  --od-lh-relaxed: 1.65;

  --od-tracking-wide:   0.08em;    /* eyebrow labels (RÉALISATIONS, CONTACT) */
  --od-tracking-normal: 0;
  --od-tracking-tight: -0.01em;

  /* Transitions */
  --od-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --od-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --od-t-fast:    120ms;
  --od-t-base:    220ms;
  --od-t-slow:    380ms;

  /* ==============================
     LAYOUT GLOBALS
     Centraliser ici pour éviter la désynchronisation.
     ============================== */
  --od-header-height: 83px;          /* Hauteur header (mobile + desktop compact) */
  --od-header-height-desktop: 64px;  /* Hauteur estimée après scroll (desktop) */
}

/* ============================================================
   SEMANTIC ELEMENTS — drop-in styling for raw HTML
   Scope with .od or use as globals.
   ============================================================ */
.od, .od-scope {
  font-family: var(--od-font-body);
  color: var(--od-fg);
  font-size: var(--od-fs-body);
  line-height: var(--od-lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.od h1, .od-h1 {
  font-family: var(--od-font-display);
  font-weight: 700;
  font-size: var(--od-fs-h1);
  line-height: var(--od-lh-tight);
  letter-spacing: var(--od-tracking-tight);
  color: var(--od-fg);
  margin: 0 0 var(--od-space-4) 0;
  text-wrap: balance;
}

.od h2, .od-h2 {
  font-family: var(--od-font-display);
  font-weight: 700;
  font-size: var(--od-fs-h2);
  line-height: var(--od-lh-snug);
  color: var(--od-fg);
  margin: 0 0 var(--od-space-3) 0;
  text-wrap: balance;
}

.od h3, .od-h3 {
  font-family: var(--od-font-body);
  font-weight: 600;
  font-size: var(--od-fs-h3);
  line-height: var(--od-lh-snug);
  color: var(--od-fg);
  margin: 0 0 var(--od-space-3) 0;
}

.od h4, .od-h4 {
  font-family: var(--od-font-body);
  font-weight: 600;
  font-size: var(--od-fs-h4);
  line-height: var(--od-lh-snug);
  color: var(--od-fg);
  margin: 0 0 var(--od-space-2) 0;
}

.od-hero {
  font-family: var(--od-font-display);
  font-weight: 800;
  font-size: var(--od-fs-hero);
  line-height: var(--od-lh-tight);
  letter-spacing: var(--od-tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

.od-eyebrow {
  font-family: var(--od-font-body);
  font-weight: 600;
  font-size: var(--od-fs-small);
  letter-spacing: var(--od-tracking-wide);
  text-transform: uppercase;
  color: var(--od-fg-muted);
}

.od p, .od-p {
  font-size: var(--od-fs-body);
  line-height: var(--od-lh-relaxed);
  color: var(--od-fg);
  margin: 0 0 var(--od-space-4) 0;
  text-wrap: pretty;
}

.od-lead {
  font-size: 18px;
  line-height: var(--od-lh-relaxed);
  color: var(--od-fg-muted);
}

.od small, .od-small { font-size: var(--od-fs-small); color: var(--od-fg-muted); }
.od code, .od-code {
  font-family: var(--od-font-mono);
  font-size: 0.92em;
  background: var(--od-ink-100);
  padding: 2px 6px;
  border-radius: var(--od-radius-sm);
}

.od a, .od-a {
  color: var(--od-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--od-amber-500);
  transition: color var(--od-t-fast) var(--od-ease);
}
.od a:hover, .od-a:hover { color: var(--od-amber-600); }

/* Utility: amber highlight bar (signature brand element from realisations) */
.od-highlight {
  background: var(--od-amber-500);
  color: var(--od-navy-900);
  padding: 0.12em 0.3em;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}