/* ============================================================
   refindustry / tokens.css
   Variables only. No selectors, no components, no exceptions.
   Every other file reads from here and never hardcodes a value.
   Changing the look of the whole site starts and usually ends here.
   ============================================================ */
:root {

  /* ---- brand ------------------------------------------------
     Three accents, three jobs. Nothing borrows another's job. */
  --rfi-navy:        #002E87;   /* brand, selected state */
  --rfi-navy-dark:   #001F5C;
  --rfi-teal:        #00A793;   /* every interactive hover, every primary button */
  --rfi-teal-dark:   #007568;
  --rfi-orange:      #EF855C;   /* fills and rules only, never text */
  --rfi-orange-text: #C2551F;   /* the same accent at 4.7:1 — active nav item */

  /* ---- ink --------------------------------------------------- */
  --rfi-text:        #1D1D1D;
  --rfi-text-2:      #6B6B6B;
  --rfi-text-3:      #979797;

  /* ---- ground ------------------------------------------------ */
  --rfi-bg:          #F4F4F4;   /* the page */
  --rfi-surface:     #FFFFFF;   /* every card and panel */
  --rfi-input:       #EDF0F5;
  --rfi-footer:      #272F3F;
  --rfi-border:      #E4E4E4;   /* only inside white surfaces */
  --rfi-border-soft: #ECECEC;
  --rfi-placeholder: #E5E7EB;   /* the last grey substitute: stack thumbnails only */

  /* ---- empty slots -------------------------------------------
     A picture slot is never left blank. Two fills, and they are deliberately NOT
     the same thing: our mark says "no picture, this is a Refindustry story", and
     it may only appear on OUR content. A company gets initials instead, because
     several company cards in a row all wearing our wordmark would read as our
     companies. See docs/design-decisions.md 3.

     These carry their own values rather than pointing at --rfi-partner-tint,
     which they happen to match today: partner prominence is a commercial dial
     that is meant to be turned, and turning it must not repaint every card that
     simply has no picture. */
  --rfi-brandfill-bg:    #F0F6FF;         /* the no-image brand fill ground */
  --rfi-brandfill-mark:  var(--rfi-navy); /* the mark on it, quietened by --rfi-brandfill-ink */
  --rfi-brandfill-ink:   .26;             /* how loud the mark is. 0 = an empty tinted box */
  --rfi-monogram-bg:     #F0F6FF;         /* the initials plate on a company slot */
  --rfi-monogram-text:   var(--rfi-navy);

  /* ---- ui accents -------------------------------------------- */
  --rfi-inverse:      #FFFFFF;   /* text / marks on a dark or accent ground */

  /* White at alpha: everything drawn ON a dark surface (footer, subscribe band,
     house block). It was eleven hand-typed rgba() literals across three component
     files; the ladder is named here so those files hold no colour of their own.

     FOUR text steps, not the prototype's ten. The ten were drift, not intent (.85
     vs .9, .75/.72/.7, .55/.5, .45/.4), so each cluster collapses to one step,
     chosen so the MOST VISIBLE member of the cluster does not move at all: footer
     body stays .85, footer links stay .75, labels and legal stay .55/.45. The only
     shifts (<=.05) land on the rail's and the band's secondary lines. The hairline
     is a rule, not a text step, so it keeps its own token. */
  --rfi-inverse-strong: rgba(255,255,255,.85);  /* footer body, band legal link */
  --rfi-inverse-soft:   rgba(255,255,255,.75);  /* THE DEFAULT: footer links, band + house lines */
  --rfi-inverse-mute:   rgba(255,255,255,.55);  /* column labels, legal text, house kicker */
  --rfi-inverse-faint:  rgba(255,255,255,.45);  /* footer legal text, dark-ground underline */
  --rfi-inverse-line:   rgba(255,255,255,.12);  /* hairline on a dark ground (a rule, not text) */
  --rfi-featured-bg:  #FFF6DF;   /* the gold "Featured" hero badge (an editor pinned it) */
  --rfi-featured-text:#8A6A00;

  /* ---- shape -------------------------------------------------
     ONE radius dial. The two smaller radii are DERIVED from it, not typed next
     to it: the prototype used 8/6/5/4px, and four hand-set numbers mean changing
     the radius of the site is four edits and three of them get forgotten.
     Everything inside a surface (tags, badges, thumbnails, inner plates) steps
     down from the same value, so --rfi-radius really does restyle every corner
     (design-system.md, acceptance 4). */
  --rfi-radius:      8px;
  --rfi-radius-sm:   max(0px, calc(var(--rfi-radius) - 2px));   /* inner plates, tags, small buttons */
  --rfi-radius-xs:   max(0px, calc(var(--rfi-radius) - 4px));   /* badges, logo plates */
  --rfi-shadow:      0 1px 2px rgba(16,32,64,.04), 0 4px 14px rgba(16,32,64,.05);
  --rfi-shadow-up:   0 2px 4px rgba(16,32,64,.06), 0 8px 22px rgba(16,32,64,.09);
  --rfi-scrim:       rgba(0,0,0,.85);   /* the dimmed page behind an enlarged image */
  --rfi-lift:        translateY(-2px);   /* the one hover motion on the site */

  /* ---- grid -------------------------------------------------- */
  --rfi-page:        1280px;
  --rfi-page-pad:    40px;
  --rfi-gap:         18px;
  --rfi-cols:        4;         /* module = (page - 2*pad - 3*gap) / 4 = 286px */
  --rfi-rail:        1;         /* how many columns the rail takes */
  --rfi-measure:     720px;     /* the reading column: nothing but the hero breaks it */

  /* ---- type -------------------------------------------------- */
  --rfi-font-ui:     'Jost', sans-serif;        /* structure: headings, titles, UI */
  --rfi-font-text:   'Open Sans', sans-serif;   /* running text */
  --rfi-h1-art:      38px;
  --rfi-h1-page:     24px;
  --rfi-h2-section:  20px;
  --rfi-card-title:  16.5px;
  --rfi-body:        17px;
  --rfi-desc:        13.5px;
  --rfi-meta:        12px;
  --rfi-label:       10px;

  /* ---- spacing ----------------------------------------------- */
  --rfi-block-gap:   38px;      /* between blocks on a page */
  --rfi-pad-card:    16px;
  --rfi-pad-panel:   22px;

  /* ============================================================
     PARTNER PROMINENCE
     Everything that makes a partner louder lives here, so that
     "give partners more weight" is an edit to this block, not a
     rewrite of the templates. Raise a number, the whole site follows.
     ============================================================ */
  --rfi-partner-tint:    #F0F6FF;
  --rfi-partner-line:    #D8E5F5;
  --rfi-partner-accent:  var(--rfi-navy);
  --rfi-partner-rule:    3px;    /* top rule on a partner card. 0 = invisible */
  --rfi-partner-fill:    var(--rfi-surface);  /* white by default; set to --rfi-partner-tint to tint the whole card */
  --rfi-partner-scale:   1;      /* 1.0 = same size as editorial. 1.05 = visibly bigger */
}