/* ==========================================================================
   MINREX Design Tokens
   Single source of truth for colour, type, space, motion and elevation.
   Nothing in this file selects anything: it only declares custom properties.
   ========================================================================== */

:root {
  /* ---- Colour -------------------------------------------------------------
     Republic of Cameroon palette, deployed with discipline:
     green is the institutional ground, gold is hairline and emblem material
     only, red is reserved exclusively for alerts and never for decoration. */

  --ink:            #12180F;   /* body text, near-black with a green undertone */
  --ink-2:          #3A443A;   /* secondary text */
  --ink-3:          #626D62;   /* muted text, captions, metadata */

  --vert-nuit:      #072A20;   /* deepest ground: state bar, footer */
  --vert-profond:   #0B3D2E;   /* institutional ground: masthead, hero */
  /* Dark enough to clear 4.5:1 against --papier, not only against white:
     links and eyebrows sit on the tinted page surface more often than on cards. */
  --vert-etat:      #0F7554;   /* action, links, "online" status */
  --vert-vif:       #16A375;   /* hover state on dark grounds */
  --vert-voile:     #E3EDE8;   /* tinted surface */
  --vert-brume:     #F3F7F4;   /* faintest tint, zebra rows */

  --or:             #C9A227;   /* emblem, rules, hairlines */
  --or-clair:       #E8CF77;   /* gold on dark grounds */
  --or-voile:       #F7EFD4;   /* gold tint surface */

  --rouge-etat:     #C8102E;   /* alerts, travel advisories, errors */
  --rouge-voile:    #FBEAEC;

  --ambre:          #8A6100;   /* "physical step required" status */
  --ambre-voile:    #FBF2DC;

  --papier:         #EEF2EF;   /* page surface, cool green-grey */
  --blanc:          #FFFFFF;
  --surface:        #FFFFFF;   /* cards, panels */
  --ligne:          #D3DCD6;   /* hairlines on light grounds */
  --ligne-forte:    #B6C3BB;
  --ligne-sombre:   rgba(255, 255, 255, 0.16); /* hairlines on dark grounds */

  /* ---- Typography ---------------------------------------------------------
     Spectral  : display. Screen-optimised serif, French foundry, institutional.
     Archivo   : body and interface. Sturdy grotesque for dense forms.
     Plex Mono : data. Reference numbers, case IDs, record strips. */

  --ff-display: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ff-body:    'Archivo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --fs-3xs: 0.6875rem;  /* 11px  mono eyebrows, chip labels */
  --fs-2xs: 0.75rem;    /* 12px  metadata */
  --fs-xs:  0.8125rem;  /* 13px  captions, table cells */
  --fs-sm:  0.9375rem;  /* 15px  dense interface text */
  --fs-md:  1.0625rem;  /* 17px  body */
  --fs-lg:  1.1875rem;  /* 19px  lead paragraph */
  --fs-xl:  clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --fs-2xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-4xl: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);

  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-relaxed:1.68;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;   /* mono eyebrows and chip labels */

  /* ---- Space --------------------------------------------------------------
     4px base. Section rhythm lives on layout classes, never on components. */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---- Layout ------------------------------------------------------------ */

  --measure:        68ch;      /* readable line length */
  --w-container:    1240px;
  --w-narrow:       880px;
  --gutter:         clamp(1rem, 0.4rem + 2.4vw, 2.5rem);

  /* ---- Radii and elevation ----------------------------------------------- */

  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 42, 32, 0.06),
               0 1px 1px rgba(7, 42, 32, 0.04);
  --shadow-md: 0 2px 4px rgba(7, 42, 32, 0.06),
               0 8px 20px rgba(7, 42, 32, 0.08);
  --shadow-lg: 0 4px 8px rgba(7, 42, 32, 0.07),
               0 20px 48px rgba(7, 42, 32, 0.14);

  /* ---- Motion -------------------------------------------------------------
     Every duration below collapses to 0 under prefers-reduced-motion,
     handled once in base.css. */

  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
  --dur-story: 720ms;
  --ease-out:  cubic-bezier(0.22, 0.68, 0.35, 1);
  --ease-in-out: cubic-bezier(0.65, 0.02, 0.28, 1);

  /* ---- Stacking ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-overlay: 300;
  --z-skip:    400;

  /* ---- Guilloche -----------------------------------------------------------
     The engraved line pattern of a security document. Used at very low
     opacity behind official surfaces so it reads as texture, not decoration. */

  --guilloche: repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0 5px,
      currentColor 5px 5.6px
    );
}