/* ruf-brand.css  v1.0  (2026-08-29)
   Raw brand constants for riskupfront.com and the Workbench.
   Each property maps these onto its own semantic layer (see below).
   Readability floor baked in: body text >= 7:1, reversed text >= 10:1,
   meaningful edges/rings >= 3:1, operational text >= 16px, labels >= 13px. */

:root {
  /* ---- constants ---- */
  --ruf-ink:            #141414;   /* text on light */
  --ruf-black:          #0F0F0F;   /* dark page ground, ink header band */
  --ruf-black-2:        #161616;   /* dark panel */
  --ruf-black-3:        #1C1C1C;   /* dark sunken */
  --ruf-cream:          #F3EEE6;   /* true brand cream: text on dark, sunken surface on light */
  --ruf-page:           #FAF8F5;   /* light page ground (not pure white) */
  --ruf-white:          #FFFFFF;   /* light card */
  --ruf-red-art:        #FE3131;   /* brush stroke red. Art and the 3px stroke edge only. Never text. */
  --ruf-red-fill:       #A00505;   /* button fill; white 600-weight text on it (8.3:1) */
  --ruf-red-fill-hover: #B00707;   /* button fill, hover; white on it is 7.3:1 */
  --ruf-red-edge:       #FF8080;   /* 2px border on a red button */
  --ruf-red-text:       #A00505;   /* red as running text on white/cream (8.3:1) */
  --ruf-red-on-dark:    #FF8080;   /* interactive red on dark: 7.9:1 on #0F0F0F, 7.5:1 on #161616, 7.1:1 on #1C1C1C */
  --ruf-gold:           #B8A88A;   /* gold: text on dark (8.2:1); DECORATIVE hairline only on light (2.2:1) */
  --ruf-gold-ink:       #615437;   /* gold label ink on light (7.0:1) */
  --ruf-focus:          #35708C;   /* focus ring on light, from the bird's wing (5.2:1) */
  --ruf-hairline:       #E7E1D6;   /* decorative separators on light (1.2:1, carries no meaning) */
  --ruf-border:         #949089;   /* field edges and meaningful rules on light (3.0:1) */
  --ruf-text-2:         #4A4540;   /* secondary text on light (8.9:1) */
  --ruf-text-muted:     #595450;   /* muted text on light (7.0:1). Never below body size. */
  --ruf-text-dark:      #E0DBD5;   /* primary text on dark (13.9:1) */
  --ruf-text-dark-2:    #C8C2BE;   /* secondary on dark (10.9:1) */
  --ruf-text-dark-muted:#BEBBB8;   /* muted on dark (10:1) */
  --ruf-grade-a:        #496113;   /* from the snake green, 7:1 */
  --ruf-grade-b:        #814D00;   /* from the beak orange, 7:1 */
  --ruf-grade-c:        #A00505;   /* 8.3:1 on white; #B50909 measured 6.98 */

  /* ---- type ---- */
  --ruf-font-ui:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;      /* Workbench, all operational text */
  --ruf-font-body:      "DM Sans", system-ui, sans-serif;                                /* marketing site body */
  --ruf-font-display:   "Cormorant Garamond", Georgia, serif;                            /* marketing site display, 40px+ only */
  --ruf-font-voice:     "Instrument Serif", Georgia, serif;                              /* one heading per Workbench page, 24px+ */
  /* Poppins Bold lives only inside the wordmark SVGs. Do not load it as a webfont. */

  --ruf-size-min-ui:    16px;  /* operational text floor */
  --ruf-size-body:      18px;  /* prose */
  --ruf-size-label:     13px;  /* absolute floor for any label, uppercase tracking .06 to .10em */
  --ruf-leading:        1.6;
  --ruf-measure:        66ch;
}

/* ---- semantic layer, light property (Workbench) ---- */
:root[data-property="workbench"], .ruf-light {
  color-scheme: light;
  --surface-page:   var(--ruf-page);
  --surface-card:   var(--ruf-white);
  --surface-sunken: var(--ruf-cream);
  --text-primary:   var(--ruf-ink);
  --text-secondary: var(--ruf-text-2);
  --text-muted:     var(--ruf-text-muted);
  --border-default: var(--ruf-border);
  --border-soft:    var(--ruf-hairline);
  --action:         var(--ruf-red-fill);
  --action-hover:   var(--ruf-red-fill-hover);
  --action-edge:    var(--ruf-red-edge);
  --action-text:    var(--ruf-red-text);
  --focus-ring:     var(--ruf-focus);
  --label-ink:      var(--ruf-gold-ink);
  --band:           var(--ruf-black);          /* ink header band */
  --band-text:      var(--ruf-text-dark);
  --band-muted:     var(--ruf-text-dark-muted);
  --stroke:         var(--ruf-red-art);        /* 3px brush-stroke edge under the band */
}

/* ---- semantic layer, dark property (riskupfront.com) ---- */
:root[data-property="marketing"], .ruf-dark {
  color-scheme: dark;
  --surface-page:   var(--ruf-black);
  --surface-card:   var(--ruf-black-2);
  --surface-sunken: var(--ruf-black-3);
  --text-primary:   var(--ruf-text-dark);
  --text-secondary: var(--ruf-text-dark-2);
  --text-muted:     var(--ruf-text-dark-muted);
  --border-default: rgba(255,255,255,.22);
  --border-soft:    rgba(255,255,255,.22);
  --border-band:    rgba(255,255,255,.20);   /* the nav band edge */
  --action:         var(--ruf-red-fill);
  --action-hover:   var(--ruf-red-fill-hover);
  --action-edge:    var(--ruf-red-edge);
  --action-text:    var(--ruf-red-on-dark);
  --focus-ring:     var(--ruf-gold);
  --label-ink:      var(--ruf-gold);
}

/* ---- self-hosted fonts (paths relative to this file's package root) ---- */
@font-face { font-family: "Inter"; font-weight: 400; src: url("../fonts/Inter-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url("../fonts/Inter-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("../fonts/Inter-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url("../fonts/Inter-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-weight: 400; src: url("../fonts/DMSans-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-weight: 500; src: url("../fonts/DMSans-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-weight: 600; src: url("../fonts/DMSans-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-weight: 700; src: url("../fonts/DMSans-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-weight: 400; src: url("../fonts/InstrumentSerif-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; src: url("../fonts/InstrumentSerif-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; src: url("../fonts/CormorantGaramond-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: italic; src: url("../fonts/CormorantGaramond-600-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; src: url("../fonts/CormorantGaramond-700-normal.woff2") format("woff2"); font-display: swap; }

/* ---- focus, shared by both properties ---- */
:root { --ruf-focus-ring: #F3EEE6; }