/* ==========================================================================
   CUMPAUND — ADIRE ELÉKO DESIGN SYSTEM
   --------------------------------------------------------------------------
   Yoruba indigo resist-dye as a working interface language.

   Three rules govern everything below:
     1. INDIGO DEPTH IS QUANTITY. In a real vat, more dips = deeper blue.
        Weight, magnitude and emphasis are encoded as dye depth, never as
        arbitrary hue. --indigo-100 (one dip) → --indigo-900 (many).
     2. STRUCTURE IS RESIST, NOT FILL. Every division is a hairline of undyed
        cotton. No filled chrome, no shadows, no elevation stacking. Cloth is
        flat; hierarchy comes from dye depth and rule weight.
     3. COLOUR IS DYE CHEMISTRY. Accents are the pigments that sit beside
        indigo in an actual dye yard — oxidation gold, kola red-brown, camwood
        orange, indigo-leaf green. Each is bound to one semantic role and is
        never used decoratively.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- The vat: indigo depth scale = quantity --------------------------- */
  --vat:        #06111C;   /* undyed-out ground, deepest */
  --indigo-900: #0A1A2B;
  --indigo-800: #0F2540;
  --indigo-700: #143253;
  --indigo-600: #1A4169;
  --indigo-500: #215285;
  --indigo-400: #2C69A4;
  --indigo-300: #4C8AC4;
  --indigo-200: #7FAFDA;
  --indigo-100: #B4CFEA;   /* one dip, palest */

  /* --- Undyed cotton: the resist ---------------------------------------- */
  --resist:      #F4EFE3;
  --resist-soft: #DCD5C5;
  --resist-dim:  #A9A395;  /* 4.7:1 on --indigo-900 */
  --resist-line:      rgba(244, 239, 227, 0.20);
  --resist-line-firm: rgba(244, 239, 227, 0.42);
  --resist-line-faint:rgba(244, 239, 227, 0.09);

  /* --- Dye-yard pigments: each bound to one meaning --------------------- */
  --oxide:      #E8AE33;   /* indigo oxidising in air → DIVIDEND CASH */
  --oxide-deep: #B9801A;   /* deeper bloom → REINVESTMENT COMPOUNDING */
  --kola:       #C04B33;   /* kola nut / camwood → FEES, LOSS, BLOCKED */
  --osun:       #DE7C42;   /* osun camwood → FX TRANSLATION EFFECT */
  --vine:       #6FA37C;   /* indigo-leaf green → VERIFIED, VALID */

  /* Ink variants. The pigments above are mixed for FILLS, where they sit in
     large blocks. As small text on an indigo ground they fall under 4.5:1, so
     each has a lighter ink that keeps the same dye identity and clears WCAG AA.
     Rule: pigment for fills, -ink for type. */
  --oxide-ink: #F0C05C;
  --kola-ink:  #E8836B;
  --vine-ink:  #86C795;
  --ink-on-oxide: #2A1B00;  /* the only dark ink: type sitting ON oxidation gold */
  --oxide-lift: #F2BC4B;    /* gold one shade brighter, hover only */

  /* --- Semantic bindings for the decomposition -------------------------- */
  --c-price:      var(--indigo-300);
  --c-dividend:   var(--oxide);
  --c-reinvest:   var(--oxide-deep);
  --c-fee:        var(--kola);
  --c-fx:         var(--osun);

  /* --- Type ------------------------------------------------------------- */
  --face-ui:   'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  --face-stamp:'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  --face-data: 'Source Code Pro', 'Noto Sans', ui-monospace, 'Cascadia Mono', monospace;


  /* --- Type ramp: nine steps, no ad-hoc sizes ---------------------------- */
  --fs-1:  9px;   /* tier chips, micro stamps */
  --fs-2: 10px;   /* stamped labels, nav */
  --fs-3: 11px;   /* buttons, small labels */
  --fs-4: 12px;   /* captions, table cells, measurement */
  --fs-5: 13px;   /* swatch symbol, dense secondary */
  --fs-6: 15px;   /* body */
  --fs-7: 17px;   /* brand mark, section emphasis */
  --fs-8: 21px;   /* stat value */
  --fs-9: 25px;   /* pie-card return */
  /* Third responsive clamp, alongside Display and Headline: the hero statement. */
  --fs-hero: clamp(38px, 6.4vw, 76px);

  /* --- Spacing: a woven rhythm, 4px warp -------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-vat: cubic-bezier(0.16, 1, 0.3, 1);   /* exponential ease-out */
  --dur-dip: 420ms;
  --dur-tap: 160ms;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Sticky footer: short pages (the policy screens) must still fill the viewport
     so the foot wordmark sits on the bottom edge instead of floating mid-screen.
     The view column grows to take the slack. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--vat);
  color: var(--resist);
  font-family: var(--face-ui);
  font-size: var(--fs-6);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Native controls (weight inputs, checkboxes) take the dye-yard gold. */
  accent-color: var(--oxide);
  /* The cloth itself. Adire eléko resist is drawn by hand through starch, so the
     lines waver and the stencil blocks never land on a perfect pitch — authored
     as irregular vector linework rather than a uniform two-axis gradient grid,
     which would read as machine ruling and not as cloth. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23F4EFE3' stroke-opacity='0.055' stroke-width='1.1'%3E%3Cpath d='M78 0c2 44-3 66 1 104-3 40 2 62-1 104 2 44-2 70 0 112'/%3E%3Cpath d='M162 0c-3 52 2 74-1 118 3 38-2 58 1 96-2 40 1 66-1 106'/%3E%3Cpath d='M246 0c1 38-2 70 1 108-2 46 3 64 0 108 1 38-2 66 0 104'/%3E%3Cpath d='M0 84c46 2 68-3 110 1 42-3 60 2 104-1 44 2 68-2 106 0'/%3E%3Cpath d='M0 172c52-3 72 2 116-1 40 3 62-2 100 1 38-2 66 1 104-1'/%3E%3Cpath d='M0 258c40 1 74-2 112 1 44-2 62 3 108 0 38 1 64-2 100 0'/%3E%3C/g%3E%3Cg fill='%23F4EFE3' fill-opacity='0.035'%3E%3Ccircle cx='120' cy='128' r='2.4'/%3E%3Ccircle cx='204' cy='214' r='2.4'/%3E%3Ccircle cx='40' cy='216' r='2.4'/%3E%3Ccircle cx='286' cy='58' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 320px;
}

/* One deep pool of dye behind the first viewport. Depth from the subject's own
   material, not a coloured light source: the reference glows, this one is dyed. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(44,105,164,.20), transparent 62%),
    radial-gradient(90% 60% at 8% 0%, rgba(33,82,133,.16), transparent 58%);
}

/* The main view grows to fill the sticky-footer column, pushing the footer and the
   foot wordmark to the bottom of the viewport on short pages. */
#view { flex: 1 0 auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
a { color: var(--indigo-200); }

:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 2px;
}

/* Selection is a mark on the cloth: an oxidation-gold bloom with dark ink over
   it, rather than the browser's default blue — which belongs to no palette. */
::selection { background: var(--oxide); color: var(--ink-on-oxide); }
::-moz-selection { background: var(--oxide); color: var(--ink-on-oxide); }

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
.stamp {
  font-family: var(--face-stamp); font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.1;
}
.stamp-sm { font-family: var(--face-stamp); font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.14em; font-size: var(--fs-2); color: var(--resist-dim); }
.data { font-family: var(--face-data); font-variant-numeric: tabular-nums; }
.t-dim { color: var(--resist-dim); }
.t-soft { color: var(--resist-soft); }

.figure-hero {
  /* The big money figure — Archivo, proportional so a single display number reads
     evenly (a monospace gives the decimal point a full empty cell). tabular-nums
     keeps digits aligned; the ₦ glyph comes from the text= supplement in the head,
     since Google subsets ₦ out of Archivo's default file. The site's tabular
     figures stay monospace; only this display number is proportional. */
  font-family: var(--face-ui);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 6.2vw, 62px);
  letter-spacing: -0.02em;
  line-height: 1;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. RESIST STRUCTURE — hairlines, never boxes
   -------------------------------------------------------------------------- */
.panel {
  border: 1px solid var(--resist-line);
  background: var(--indigo-900);
}
.rule       { height: 1px; background: var(--resist-line); border: 0; }
.rule-firm  { height: 1px; background: var(--resist-line-firm); border: 0; }

/* --------------------------------------------------------------------------
   5. CRACKLE — the flaw in the cloth marks the caveat in the data.
   Authored vector linework (never a turbulence filter).
   -------------------------------------------------------------------------- */
.crackle { position: relative; }
.crackle::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23E8AE33' stroke-width='0.7' stroke-opacity='0.5'%3E%3Cpath d='M8 2 L14 26 L6 44 L18 70 L10 96 L20 118'/%3E%3Cpath d='M52 0 L46 22 L58 40 L48 66 L60 92 L52 120'/%3E%3Cpath d='M96 4 L104 28 L92 52 L102 78 L94 104 L106 120'/%3E%3Cpath d='M14 26 L46 22'/%3E%3Cpath d='M18 70 L48 66 L92 52'/%3E%3Cpath d='M10 96 L52 92 L94 104'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. CONTROLS — cut, stamped, flat
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s4);
  border: 1px solid var(--resist-line-firm);
  background: transparent;
  font-family: var(--face-stamp); font-weight: 700;
  letter-spacing: -0.005em; font-size: var(--fs-5);
  transition: background var(--dur-tap) var(--ease-vat),
              border-color var(--dur-tap) var(--ease-vat),
              color var(--dur-tap) var(--ease-vat);
}
.btn:hover:not(:disabled) { background: var(--indigo-700); border-color: var(--resist); }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn-dye {                                   /* the committed primary action */
  background: var(--indigo-500);
  border-color: var(--indigo-300);
  color: var(--resist);
}
.btn-dye:hover:not(:disabled) { background: var(--indigo-400); border-color: var(--resist); }
.btn-oxide { background: var(--oxide); border-color: var(--oxide); color: var(--ink-on-oxide); }
.btn-oxide:hover:not(:disabled) { background: var(--oxide-lift); border-color: var(--resist); }

.btn-sm { padding: 7px 11px; font-size: var(--fs-4); letter-spacing: -0.005em; }

.field {
  background: var(--indigo-800);
  border: 1px solid var(--resist-line);
  color: var(--resist);
  padding: 9px var(--s3);
  width: 100%;
}
.field::placeholder { color: var(--resist-dim); }
.field:focus { border-color: var(--indigo-300); outline: none; }

/* Weight slider — the dip control. A 3px visual track (the resist line) inside a
   24px touch target: the rule stays hairline-thin without shrinking the grab. */
.dip {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; background: transparent;
  border: 0; cursor: pointer;
}
.dip::-webkit-slider-runnable-track { height: 3px; background: var(--indigo-700); }
.dip::-moz-range-track           { height: 3px; background: var(--indigo-700); }
.dip::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5px; background: var(--oxide);
  border: 1px solid var(--vat); cursor: grab;
}
.dip::-moz-range-thumb {
  width: 13px; height: 13px; background: var(--oxide);
  border: 1px solid var(--vat); border-radius: 0; cursor: grab;
}
.dip:disabled { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   7. TIER MARKS — never colour alone (a11y): each carries a glyph + label
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. MOTION — one authored moment: cloth entering the vat.
   -------------------------------------------------------------------------- */
@keyframes dip-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}
.dips-in { animation: dip-in var(--dur-dip) var(--ease-vat) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   9. UTILITIES
   -------------------------------------------------------------------------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--s5); }
.row  { display: flex; align-items: center; gap: var(--s3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.col  { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}