/* ===============================================================
   JIL SOVEREIGN RETAIL — CANONICAL DESIGN SYSTEM

   Single source of truth for retail-facing surfaces
   (retail.jilsovereign.com and other consumer / retail sites).

   Palette: white base + pale-blue gradient accents,
            near-black ink, cranberry + gold accents.
   Type:    Source Serif 4 (editorial) + IBM Plex Sans (UI)
            + JetBrains Mono (labels, numerics).

   Load order in every retail page:
     1. jil-retail-standard.css   (this file — tokens + base)
     2. jil-retail.css            (topbar / footer / homepage sections)
     3. jil-retail-product.css    (product-page sections)

   Property of JIL Sovereign Technologies, Inc. (DE).
   All Rights Reserved. 2025-2026 Patent Pending.
   Author: Jeffrey Mendonca (TX) (7265)
   File:   apps/retail-v2/public/assets/jil-retail-standard.css
   Repo:   jammer-x/jil-sovereign-full
   Version: 2026.04.23-retail-standard
   =============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aptos:ital,wght@0,400;0,500;0,600;0,700&display=swap');


/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------- */

:root{
  /* Surfaces — white base + pale-blue accent gradient */
  --paper:        #FFFFFF;   /* primary background — pure white */
  --paper-deep:   #F3F7FC;   /* light-blue washed alternating section */
  --paper-edge:   #ECF2FA;   /* light blue — card hover / featured panel */
  --surface-deep: #E4EEF8;   /* stronger light blue — footer / CTA strip */
  --ice:          #C9DDF0;   /* deepest light blue — gradient endpoint */

  /* Text */
  --ink:    #0A0F1A;         /* primary text — near-black */
  --ink-2:  #2E3642;         /* secondary text */
  --ink-3:  #6B7280;         /* tertiary / meta */

  /* Rules (dark-on-light, semi-transparent) */
  --rule:      rgba(10,15,26,0.15);
  --rule-soft: rgba(10,15,26,0.08);

  /* Accents */
  --crimson:   #9B1C1F;      /* cranberry — CTAs, verify, seal italics */
  --crimson-2: #7D1516;      /* cranberry dark — hover */
  --gold:      #B8913A;      /* institutional gold — hallmark, premium */
  --moss:      #2E7D4F;      /* success / clear */
  --amber:     #CF900F;      /* caution */

  /* Type families */
  --serif: "Source Serif 4", "Instrument Serif", "GT Sectra", Georgia, serif;
  --sans:  "Aptos Display", "Aptos", "IBM Plex Sans", "Sohne", "Inter", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale */
  --fs-display: clamp(48px, 7vw,  104px);
  --fs-h1:      clamp(36px, 4.5vw, 64px);
  --fs-h2:      clamp(28px, 3vw,   44px);
  --fs-h3:      clamp(20px, 1.6vw, 26px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-tiny:    11px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  80px;
  --space-9:  96px;

  /* Radii — retail is predominantly sharp-cornered */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}


/* ---------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; min-height:100%; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient gradient — faint gold + light-blue washes on white */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 18% 8%,  rgba(184,145,58,0.06) 0 35%, transparent 55%),
    radial-gradient(circle at 85% 92%, rgba(216,230,245,0.45) 0 40%, transparent 60%);
}

main, header, footer, section{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
a:hover{ color: var(--crimson); }

img{ max-width:100%; display:block; }


/* ---------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); line-height:1.2; letter-spacing:-0.005em; }

h1 em, h2 em, h3 em{
  font-style: italic;
  color: var(--crimson);
  font-weight: 400;
}

p{ margin:0 0 1em; max-width:65ch; }

.display{
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.lead{
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  font-weight: 300;
}

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow .dot{
  display:inline-block; width:5px; height:5px; margin:0 8px 2px 0;
  background: var(--crimson); border-radius:50%; vertical-align:middle;
}

.meta{
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ---------------------------------------------------------------
   4. RULES (HORIZONTAL LINES)
   --------------------------------------------------------------- */

.rule       { height:1px; background: var(--rule); border:0; margin:0; }
.rule-soft  { height:1px; background: var(--rule-soft); border:0; margin:0; }
.rule-heavy { height:3px; background: var(--rule); border:0; margin:0; }
.rule-double{
  height:6px; background:transparent; margin:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}


/* ---------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */

.container       { max-width:1360px; margin:0 auto; padding:0 40px; }
.container-narrow{ max-width: 960px; margin:0 auto; padding:0 40px; }

@media (max-width: 640px){
  .container, .container-narrow{ padding:0 24px; }
}

.stack-8  > * + *{ margin-top:8px;  }
.stack-16 > * + *{ margin-top:16px; }
.stack-24 > * + *{ margin-top:24px; }
.stack-40 > * + *{ margin-top:40px; }

.gridmarks{ position:relative; padding:0; }
.gridmarks::before, .gridmarks::after{
  content:""; position:absolute; top:0; bottom:0; width:1px; background: var(--rule-soft);
}
.gridmarks::before{ left:0; }
.gridmarks::after { right:0; }

.corner-index{
  position:absolute; top:24px; right:24px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-3);
}


/* ---------------------------------------------------------------
   6. BUTTONS
   Primary CTA = cranberry fill with white text.
   Ghost = hairline on white; hover inverts to dark.
   --------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px;
  border:1px solid var(--ink);
  background:transparent;
  color: var(--ink);
  font-family: var(--mono); font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover{ background: var(--ink); color: var(--paper); }

.btn-primary{
  background: var(--crimson); color: var(--paper); border-color: var(--crimson);
}
.btn-primary:hover{
  background: var(--crimson-2); border-color: var(--crimson-2); color: var(--paper);
}

.btn-crimson{
  background: var(--crimson); border-color: var(--crimson); color: var(--paper);
}
.btn-crimson:hover{
  background: var(--crimson-2); border-color: var(--crimson-2); color: var(--paper);
}

.btn-ghost       { border-color: var(--rule-soft); color: var(--ink-2); }
.btn-ghost:hover { background:transparent; color: var(--ink); border-color: var(--ink); }

.btn-sm { padding: 9px 14px; font-size:10px; }
.btn-lg { padding:16px 28px; font-size:12px; }

.btn .arrow{ font-size:14px; line-height:1; letter-spacing:0; }


/* ---------------------------------------------------------------
   7. CARDS
   --------------------------------------------------------------- */

.card{
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px;
  position: relative;
}
.card-num{
  position:absolute; top:16px; right:20px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.14em;
  color: var(--ink-3);
}


/* ---------------------------------------------------------------
   8. FORM INPUTS
   --------------------------------------------------------------- */

.input, .select, .textarea{
  width:100%; padding:12px 14px;
  border:1px solid var(--rule);
  background: var(--paper);
  font-family: var(--sans); font-size:14px; color: var(--ink);
  border-radius: var(--radius-0); outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--crimson);
  box-shadow: 0 0 0 1px var(--crimson);
}

.label{
  display:block;
  font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-3);
  margin-bottom:8px;
}


/* ---------------------------------------------------------------
   9. CHIPS
   --------------------------------------------------------------- */

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ink-2);
}
.chip-crimson{ border-color: var(--crimson); color: var(--crimson); }
.chip-moss   { border-color: var(--moss);    color: var(--moss); }
.chip-gold   { border-color: var(--gold);    color: var(--gold); }
.chip-solid  { background: var(--ink); color: var(--paper); border-color: var(--ink); }


/* ---------------------------------------------------------------
   10. HALLMARK (SEAL / BADGE)
   --------------------------------------------------------------- */

.hallmark{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono); font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color: var(--crimson);
}
.hallmark .ring{
  width:14px; height:14px; border:1.5px solid var(--crimson); border-radius:50%;
  display:inline-grid; place-items:center;
}
.hallmark .ring::after{
  content:""; width:5px; height:5px; background: var(--crimson); border-radius:50%;
}


/* ---------------------------------------------------------------
   11. SPEC TABLES (LABEL / VALUE PAIRS)
   --------------------------------------------------------------- */

.spec{
  display:grid; grid-template-columns: 160px 1fr; gap: 2px 24px;
  font-size: 13px;
}
.spec dt{
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-3);
}
.spec dd{
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink);
  font-feature-settings: "tnum","lnum";
}
.spec .em{ color: var(--crimson); font-weight:500; }


/* ---------------------------------------------------------------
   12. UTILITY CLASSES
   --------------------------------------------------------------- */

.mono    { font-family: var(--mono); font-feature-settings:"tnum","lnum"; }
.serif   { font-family: var(--serif); }
.italic  { font-style: italic; }
.crimson { color: var(--crimson); }
.gold    { color: var(--gold); }
.muted   { color: var(--ink-3); }
.tnum    { font-feature-settings: "tnum","lnum"; }
.tabular { font-variant-numeric: tabular-nums; }
.center  { text-align: center; }

.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;
}


/* ---------------------------------------------------------------
   13. EYEBROW → HEADING FLOW
   Auto-space a heading that immediately follows an .eyebrow,
   so page templates don't need inline margin-top overrides.
   --------------------------------------------------------------- */

.eyebrow + h1, .eyebrow + h2, .eyebrow + h3{ margin-top: 16px; }


/* ---------------------------------------------------------------
   14. CONTAINER VARIANTS
   --------------------------------------------------------------- */

.container--tight { max-width: 560px; margin:0 auto; padding:0 40px; }
.container--legal { max-width: 780px; margin:0 auto; padding:0 40px; }

@media (max-width: 640px){
  .container--tight,
  .container--legal{ padding: 0 24px; }
}


/* ---------------------------------------------------------------
   15. HERO + EYEBROW CENTER VARIANTS
   --------------------------------------------------------------- */

.hero--center    { text-align: center; }
.hero--center .eyebrow,
.eyebrow--center { display: inline-flex; justify-content: center; }


/* ---------------------------------------------------------------
   16. ACTION CLUSTERS (rows of buttons / links)
   --------------------------------------------------------------- */

.actions-row{
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 28px;
}
.actions-row--center { justify-content: center; }
.actions-row--end    { justify-content: flex-end; }
.actions-row--lg     { gap: 14px; margin-top: 36px; }
.actions-row--tight  { margin-top: 16px; gap: 8px; }


/* ---------------------------------------------------------------
   17. FORM + STATUS MESSAGES
   --------------------------------------------------------------- */

.form-error{ color: var(--crimson); font-size: 13px; margin: 0; }
.form-note { color: var(--ink-3);   font-size: 13px; margin: 0; }


/* ---------------------------------------------------------------
   18. EMPTY / LOADING STATES
   --------------------------------------------------------------- */

.empty-state{
  padding: 32px 0; color: var(--ink-3); font-size: 14px;
}
.empty-state p{ margin: 0 0 12px; }


/* ---------------------------------------------------------------
   19. CHECKBOX ROWS + CLUSTERS
   --------------------------------------------------------------- */

.checkbox-row{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2);
}
.checkbox-cluster{
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px;
}
.checkbox-cluster label{
  display: flex; gap: 6px; align-items: center;
}


/* ---------------------------------------------------------------
   20. MISC SMALL UTILITIES
   --------------------------------------------------------------- */

.code-sm   { font-size: 12px; }
.row-gap-0 { margin-top: 0 !important; }