/* ═══════════════════════════════════════════════════════════
   mahfuzmaruf.me — DESIGN TOKENS
   The single source of truth for colour, type, spacing, shape and
   motion. Load this before style.css. Nothing here describes a
   component; if a value is used twice, it belongs in this file.

   The system rests on φ (1.618):
     · layout columns are φ-family ratios
     · display type steps by √φ (1.272)
     · spacing is Fibonacci, whose neighbours are φ apart
   Live reference: design-system.html
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ══ RATIOS ═══════════════════════════════════════════════ */

  --phi:      1.618;   /* golden ratio                          */
  --phi-2:    2.618;   /* φ²                                    */
  --phi-half: 1.272;   /* √φ — type step, card aspect           */

  /* Main panel's grid track against the rail's 1fr.
     3fr → rail 25%.  φ³ 4.236fr → 19.1%
                      φ² 2.618fr → 27.6%  (the original Figma)
                      φ  1.618fr → 38.2%  (classic golden section)
     Must carry the `fr` unit: a bare number is invalid in
     grid-template-columns and silently drops the declaration. */
  --col-main: 3fr;


  /* ══ TYPE ═════════════════════════════════════════════════ */

  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-badge: 'Inter', system-ui, sans-serif;   /* numerals in badges */

  /* Display scale — 50px anchor, stepped by √φ. Headline sizes,
     where the golden rhythm is actually visible. */
  --fs-hero:    50px;
  --fs-lead:  30.9px;
  --fs-title: 24.3px;

  /* Text scale — the display scale continued down reaches 11.8 and
     9.3px, unreadable on a laptop. UI text gets a legible floor
     instead: ratios stop mattering once text has to be read. */
  --fs-body:  19.1px;
  --fs-sm:      16px;
  --fs-nav:     13px;
  --fs-micro:   12px;   /* badges only — never running text */

  --lh-tight: 1.2;      /* headlines            */
  --lh-snug:  1.45;     /* UI text, bubbles     */
  --lh-prose: 1.9;      /* long-form paragraphs */

  /* Display type shrinks with its container once too narrow to hold
     the cap. 1cqi = 1% of the container's inline size, so these need
     an ancestor with `container-type: inline-size`. */
  --fs-hero-fluid:  min(var(--fs-hero),  10.5cqi);
  --fs-lead-fluid:  min(var(--fs-lead),   7.5cqi);
  --fs-title-fluid: min(var(--fs-title),    7cqi);


  /* ══ SPACING — Fibonacci; neighbours are φ apart ══════════ */

  --s1:  8px;
  --s2: 13px;
  --s3: 21px;
  --s4: 34px;
  --s5: 55px;
  --s6: 89px;

  --gutter: var(--s4);   /* page edge inset */


  /* ══ BUBBLES ══════════════════════════════════════════════
     Anything with a tail (border-radius x x 0 x) is a bubble.
     Bubbles read as a chat thread: each hugs the side it was sent
     from and never spans its column, so the opposite side stays
     open. Padding is tighter than a section's — the fill colour
     does the separating, not the inset. */

  --pad-section: var(--s3);              /* 21 — section shells   */
  /* Bubble inset scales with the column instead of sitting at a fixed
     px, which looked starved on a wide desktop bubble and right on a
     narrow one.

     Both run from one Fibonacci step to the next — 13→34 and 21→55 —
     over a column of 322px (a 13" laptop rail) to 600px (a desktop
     one), then hold. Consecutive Fibonacci steps are φ apart, so the
     horizontal:vertical ratio stays ≈1.62 the whole way.

     1cqi = 1% of .chat's width, so .chat carries container-type. */
  --pad-bubble-block:  clamp(var(--s2), calc(7.55cqi - 11.3px), var(--s4));
  --pad-bubble-inline: clamp(var(--s3), calc(12.23cqi - 18.4px), var(--s5));
  --pad-bubble: var(--pad-bubble-block) var(--pad-bubble-inline);
  --bubble-max:  75%;                    /* of column; rest open  */
  --bubble-gap:  20px;                   /* a bubble standing alone */

  /* ── Chat thread ──
     Messages stack from the bottom, newest last, the way a thread
     reads. The area takes the rail's slack and no more: once the
     thread is taller than that it scrolls rather than pushing the
     section below it off screen. So the maximum is not a number —
     it is whatever height is left, which keeps the layout stable at
     every viewport. */
  --chat-gap:   var(--s2);   /* between consecutive bubbles */
  --chat-fade:  var(--s4);   /* top fade, so a cut message reads as cut */

  /* Thread colour. Deliberately not --accent: the bubbles are a
     running commentary beside the maps, and at accent strength a
     column of them out-shouts the cards they describe. Grey lets the
     accent keep meaning "this is interactive". */
  --chat-bubble:     #e5e6e9;
  --chat-bubble-ink: #666869;


  /* ══ COLOUR ═══════════════════════════════════════════════ */

  --bg:       #f8fafd;              /* page / rail                */
  --surface:  #ffffff;              /* panels, cards, bubbles     */
  --screen:   #f6f6f6;              /* map + media placeholder    */
  --ink:      #000000;
  --ink-mute: rgba(0, 0, 0, .55);
  --accent:   #3477f2;              /* the only brand colour      */
  --dot:      #393333;
  --danger:   #ff3b30;              /* badge counts only          */
  --hairline: rgba(0, 0, 0, .08);   /* dividers                   */

  /* Dock resting (unselected) state. The active tile takes --accent;
     everything else recedes to grey so the current page reads at a
     glance. Two greys because a glyph at label weight looks heavier
     than text — the icon sits a shade lighter to match. */
  --dock-idle-icon:  #afafaf;
  --dock-idle-label: #6b6b6b;

  /* Flag bars — colour abstractions, not flag artwork */
  --flag-bd-green: #006a4e;
  --flag-bd-red:   #f42a41;
  --flag-de-black: #000000;
  --flag-de-red:   #dd0000;
  --flag-de-gold:  #ffce00;


  /* ══ SHAPE ════════════════════════════════════════════════ */

  --radius:      16px;   /* main panel        */
  --radius-sm:    8px;   /* cards, buttons    */
  --radius-xs:    4px;   /* images            */
  --radius-bubble: 25px 25px 0 25px;   /* tail bottom-right */


  /* ══ ELEVATION ════════════════════════════════════════════ */

  --shadow-sm:   0 1px 3px rgba(11, 27, 58, .14);
  --shadow-md:   0 1px 5px rgba(11, 27, 58, .45);   /* map markers */
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, .07);     /* hover       */


  /* ══ MOTION ═══════════════════════════════════════════════
     Every animated property should use these. Anything decorative
     must be disabled under prefers-reduced-motion. */

  --dur-fast: .18s;
  --dur-mid:  .38s;
  --dur-slow: .42s;
  --ease:        ease;
  --ease-out:    cubic-bezier(.22, .9, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);


  /* ══ LAYOUT CONSTANTS ═════════════════════════════════════ */

  --header-h: 81px;

  /* Everything stacked above and below a card screen, measured:
     header 81 + main padding 34/21 + caption 106 + dock-wrap 117.
     Subtracted from the viewport for the card's height budget.
     RE-MEASURE whenever the caption, dock or main padding changes:
     too low and the page gains a scrollbar, too high and the cards
     sit smaller than they need to. (Adding labels to the dock took
     it from 68px to 96px and cost 28px here.) */
  --card-chrome: 359px;
}