/* ============================================================
   3TAMIS — Design System foundations
   Colors + Typography tokens (base + semantic)
   "Une image vaut mieux que mille mots"
   ------------------------------------------------------------
   3TAMIS is an audiovisual ASBL in Bukavu (Sud-Kivu, DRC):
   documentary cinema, photography & video for citizenship
   education, peace and culture in the Great Lakes region.
   The identity below is built from that mission — warm,
   editorial, cinematic, grounded — NOT from the live website,
   which is a degraded WordPress template (see README).
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN — see README, fonts/ note) ---- */
/* Archivo Black ≈ the heavy grotesque of the real 3TAMIS logo wordmark. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Archivo+Black&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500;0,6..72,400;0,6..72,500&display=swap');

:root {
  /* ===========================================================
     BASE COLOR PALETTE
     A warm, earthen palette: film-black ink, Sud-Kivu clay,
     festival ochre, Lake Kivu green, on warm paper.
     =========================================================== */

  /* Neutrals — warm, with a faint green undertone (logo teal family) */
  --ink:        #16201D;  /* film black w/ green undertone — text, dark bg */
  --ink-2:      #243330;  /* raised dark surfaces */
  --soft:       #5C4F44;  /* secondary text on paper */
  --muted:      #8A7B6C;  /* tertiary / captions / meta */
  --line:       #DACBB6;  /* hairline borders on paper */
  --line-2:     #C8B69D;  /* stronger divider */
  --paper:      #F4ECE0;  /* primary warm paper background */
  --paper-2:    #EBDFCD;  /* sunk panels / alt rows */
  --paper-3:    #E2D3BD;  /* warmest fill */
  --white:      #FCF9F3;  /* near-white card surface */

  /* Brand — Teal (PRIMARY): the 3TAMIS logo colour (sampled #4A8F88).
     Africa silhouette green — calm, institutional, the signature mark. */
  --teal:       #4A8F88;
  --teal-deep:  #336E67;
  --teal-darker:#214B45;  /* dark teal sections / ink-teal */
  --teal-soft:  #CFE2DF;  /* tint for fills/badges */

  /* Brand — Ochre (secondary accent): cinema light, Kivu sun, gold */
  --ochre:      #E0A23A;
  --ochre-deep: #B97D1E;
  --ochre-soft: #F3DDB0;

  /* Brand — Terracotta (tertiary accent): Congo brick, festival energy */
  --terracotta:      #C0492B;
  --terracotta-deep: #97351D;
  --terracotta-soft: #E8C3B3;

  /* Support — Clay: warm earthen brown */
  --clay:       #7A4A33;

  /* Kivu aliases — the logo teal IS the Lake Kivu green; kept so the
     "three sieves" device and peace/education themes resolve to brand teal. */
  --kivu:       var(--teal);
  --kivu-deep:  var(--teal-deep);
  --kivu-soft:  var(--teal-soft);

  /* Semantic status */
  --success:    #336E67;
  --warning:    #E0A23A;
  --danger:     #B23A22;
  --info:       #2C6A8C;

  /* ===========================================================
     SEMANTIC COLOR TOKENS  (use these in product UI)
     =========================================================== */
  --bg:           var(--paper);
  --bg-sunk:      var(--paper-2);
  --surface:      var(--white);
  --surface-dark: var(--ink);

  --fg:           var(--ink);     /* primary text */
  --fg-2:         var(--soft);    /* secondary text */
  --fg-3:         var(--muted);   /* meta / captions */
  --fg-on-dark:   #F4ECE0;        /* text on ink */
  --fg-on-accent: #FCF9F3;        /* text on terracotta/kivu */

  --accent:        var(--teal);
  --accent-hover:  var(--teal-deep);
  --accent-2:      var(--ochre);
  --accent-3:      var(--terracotta);

  --border:       var(--line);
  --border-strong:var(--line-2);
  --focus-ring:   var(--teal-deep);

  /* ===========================================================
     TYPOGRAPHY — families
     Display  : Bricolage Grotesque — editorial, characterful,
                contemporary. Headlines, festival energy.
     Text/UI  : Archivo — sturdy humanist grotesque. Body & UI.
     Editorial: Newsreader (italic) — literary documentary voice
                for the motto & the "three sieves" parable. Sparse.
     =========================================================== */
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-wordmark:'Archivo Black', 'Archivo', system-ui, sans-serif; /* logo voice */
  --font-text:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-quote:   'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --t-display:  clamp(2.75rem, 6vw, 5rem);   /* hero */
  --t-h1:       clamp(2.25rem, 4.5vw, 3.5rem);
  --t-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --t-h3:       1.5rem;
  --t-h4:       1.25rem;
  --t-lg:       1.125rem;
  --t-base:     1rem;
  --t-sm:       0.875rem;
  --t-xs:       0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.14em;  /* eyebrow / overline labels */

  /* ===========================================================
     SPACING — 4px base scale
     =========================================================== */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ===========================================================
     RADII — mostly square / cinematic
     =========================================================== */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ===========================================================
     SHADOWS — soft, warm-tinted, restrained
     =========================================================== */
  --sh-xs: 0 1px 2px rgba(26,20,17,0.06);
  --sh-sm: 0 2px 6px rgba(26,20,17,0.08);
  --sh-md: 0 6px 18px rgba(26,20,17,0.10);
  --sh-lg: 0 16px 40px rgba(26,20,17,0.16);
  /* film/letterbox protection gradient */
  --grad-protect: linear-gradient(to top, rgba(26,20,17,0.85) 0%, rgba(26,20,17,0.0) 60%);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Lightweight base styles you can opt into. Products may scope
   these; here they document the intended role of each level.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .t-h4 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .t-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-small {
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* The literary "three sieves" / motto voice */
.t-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: var(--lh-normal);
  color: var(--fg);
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}