/* ============================================================
   S3D Design System — Tokens
   Science des Données et Développement Durables
   ============================================================
   Import: <link rel="stylesheet" href="colors_and_type.css">
   Or:     @import url('./colors_and_type.css');
   ============================================================ */

/* --- Fonts (Google Fonts CDN) ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Public+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Brand ---------- */
  --s3d-blue-50:  #EEF2FB;
  --s3d-blue-100: #D5DEF2;
  --s3d-blue-200: #A8BAE0;
  --s3d-blue-300: #7B95CD;
  --s3d-blue-400: #4E71BA;
  --s3d-blue-500: #1B3A8B;  /* PRIMARY */
  --s3d-blue-600: #162F71;
  --s3d-blue-700: #0F2660;
  --s3d-blue-800: #0A1B47;
  --s3d-blue-900: #06122F;

  /* ---------- Color: Accent — Terre Cuite (West-African earth) ---------- */
  --ochre-50:  #FBF3E8;
  --ochre-100: #F4DDBC;
  --ochre-300: #E2A85C;
  --ochre-500: #C2761A;  /* ACCENT */
  --ochre-700: #8B5210;
  --ochre-900: #4F2E07;

  /* ---------- Color: Vert Durable (sustainability) ---------- */
  --green-50:  #E8F1EC;
  --green-300: #6FA48A;
  --green-500: #2E6B4F;  /* DURABLE */
  --green-700: #1C4731;
  --green-900: #0E2A1C;

  /* ---------- Color: Or (audacious direction only) ---------- */
  --gold-300: #E0C77D;
  --gold-500: #B8923A;
  --gold-700: #7E631E;

  /* ---------- Color: Neutrals (warm) ---------- */
  --paper:     #FAF7F2;  /* page bg */
  --paper-2:   #F2EDE3;  /* surface 2 */
  --paper-3:   #E8E0CF;  /* surface 3 / hover */
  --line:      #E5DFD3;  /* hairlines / borders */
  --line-soft: #EDE7DA;

  --ink-50:  #F4F4F5;
  --ink-200: #D6D8DD;
  --ink-400: #8B92A1;
  --ink-500: #5B6478;
  --ink-700: #2A3447;
  --ink-900: #0A1628;  /* primary text */

  /* ---------- Color: Semantic ---------- */
  --success: var(--green-500);
  --warning: #C28A1A;
  --danger:  #B23A3A;
  --info:    var(--s3d-blue-500);

  /* ---------- Color: Surface roles ---------- */
  --bg:           var(--paper);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--paper-2);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--paper);

  --border:        var(--line);
  --border-strong: var(--ink-200);
  --border-focus:  var(--s3d-blue-500);

  --primary:        var(--s3d-blue-500);
  --primary-hover:  var(--s3d-blue-600);
  --primary-press:  var(--s3d-blue-700);
  --primary-fg:     var(--paper);

  --accent:         var(--ochre-500);
  --accent-hover:   var(--ochre-700);
  --accent-fg:      #FFFFFF;

  /* ---------- Typography: Families ---------- */
  --font-serif: 'Spectral', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Typography: Type scale (1.250 — major third) ---------- */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   60px;
  --t-6xl:   76px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.14em;  /* eyebrows + small caps */

  /* ---------- Spacing (4-pt scale) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;   /* inputs */
  --r-md: 8px;   /* buttons */
  --r-lg: 10px;  /* cards */
  --r-xl: 14px;  /* modals */
  --r-pill: 999px;

  /* ---------- Shadows (no colored glow) ---------- */
  --shadow-1: 0 1px 2px rgba(10, 22, 40, 0.06), 0 0 0 1px rgba(10, 22, 40, 0.04);
  --shadow-2: 0 4px 16px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-3: 0 16px 48px rgba(10, 22, 40, 0.14), 0 2px 4px rgba(10, 22, 40, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur:      240ms;
  --dur-slow: 400ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-narrow: 880px;
  --gutter: 24px;
  --header-h: 72px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
}

/* --- Display + headings --- */
.s3d-display,
.s3d-h1,
.s3d-h2,
.s3d-h3,
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: inherit;
}

.s3d-display { font-size: var(--t-6xl); line-height: var(--lh-tight); font-weight: 400; }
.s3d-h1, h1  { font-size: var(--t-4xl); line-height: var(--lh-tight); }
.s3d-h2, h2  { font-size: var(--t-3xl); line-height: var(--lh-snug); }
.s3d-h3, h3  { font-size: var(--t-2xl); line-height: var(--lh-snug); }

.s3d-h4, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: inherit;
}

/* --- Body --- */
p, .s3d-body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: inherit;
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
}
.s3d-lead {
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.s3d-small {
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* --- Eyebrow (small caps, used a lot) --- */
.s3d-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ochre-700);
}

/* --- Code --- */
code, kbd, samp, .s3d-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
}

/* --- Links --- */
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--primary-hover); }

/* --- Italic editorial accent --- */
.s3d-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* --- Numeric signature: 1 000 → 1 000 000 --- */
.s3d-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--ochre-700);
}

/* --- Focus ring (institutional accessibility) --- */
*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- Selection --- */
::selection {
  background: var(--s3d-blue-100);
  color: var(--ink-900);
}