/* ============================================================================
   STRIPI DESIGN SYSTEM — Foundations
   colors_and_type.css

   Font note: Sohne is proprietary (Klim Type Foundry). This file uses
   Inter (weight 300) with `ss01` + negative tracking as the open-source
   substitute the spec calls for. Swap @font-face to real Sohne for fidelity.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500&display=swap');

:root {
  /* ---------------------------------------------------------------------- */
  /* COLOR — Brand & Accent                                                 */
  /* ---------------------------------------------------------------------- */
  --primary:                 #533afd;  /* signature CTA indigo            */
  --primary-deep:            #4434d4;  /* gradient mid-stop / warm press  */
  --primary-press:           #2e2b8c;  /* pressed state                   */
  --primary-soft:            #665efd;  /* product-UI accents, chart hi    */
  --primary-bg-subdued-hover:#b9b9f9;  /* pale indigo tag fill            */
  --brand-dark-900:          #1c1e54;  /* featured tier / dashboard chrome*/
  --ruby:                    #ea2261;  /* gradient + chart accent         */
  --magenta:                 #f96bee;  /* brighter pink gradient stop     */
  --lemon:                   #9b6829;  /* warm sherbet gradient stop      */

  /* ---------------------------------------------------------------------- */
  /* COLOR — Surface                                                        */
  /* ---------------------------------------------------------------------- */
  --canvas:        #ffffff;  /* default page background        */
  --canvas-soft:   #f6f9fc;  /* cool off-white feature bands   */
  --canvas-cream:  #f5e9d4;  /* warm cream interlude           */
  --hairline:      #e3e8ee;  /* 1px borders, cards, tables     */
  --hairline-input:#a8c3de;  /* cooler hairline on inputs      */

  /* ---------------------------------------------------------------------- */
  /* COLOR — Text                                                           */
  /* ---------------------------------------------------------------------- */
  --ink:           #0d253d;  /* default body, deep navy        */
  --ink-secondary: #273951;  /* secondary on white             */
  --ink-mute:      #64748d;  /* helper, captions, labels       */
  --ink-mute-2:    #61718a;  /* nav near-equivalent            */
  --on-primary:    #ffffff;  /* text on indigo / navy          */

  /* Semantic aliases (base roles) ---------------------------------------- */
  --fg1: var(--ink);            /* primary text                */
  --fg2: var(--ink-secondary);  /* secondary text              */
  --fg3: var(--ink-mute);       /* tertiary / muted text       */
  --bg1: var(--canvas);         /* base surface                */
  --bg2: var(--canvas-soft);    /* raised / banded surface     */
  --line: var(--hairline);      /* default hairline            */

  /* ---------------------------------------------------------------------- */
  /* TYPE — Families                                                        */
  /* ---------------------------------------------------------------------- */
  --font-sans: 'Inter', 'Sohne', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  /* Display + UI both ride the same family; weight + tracking do the work. */

  /* feature sets */
  --feat-ss01: "ss01" 1;
  --feat-tnum: "tnum" 1;

  /* ---------------------------------------------------------------------- */
  /* SPACING (base 8px)                                                     */
  /* ---------------------------------------------------------------------- */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-huge:64px;

  /* ---------------------------------------------------------------------- */
  /* RADII                                                                  */
  /* ---------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ---------------------------------------------------------------------- */
  /* ELEVATION                                                              */
  /* ---------------------------------------------------------------------- */
  --shadow-1: rgba(0,55,112,0.08) 0 1px 3px;
  --shadow-2: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px;
}

/* ========================================================================== */
/* BASE                                                                       */
/* ========================================================================== */
body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--canvas);
  font-feature-settings: var(--feat-ss01);   /* ss01 globally — brand rule */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========================================================================== */
/* TYPE SCALE — semantic classes mirror {typography.*} tokens                 */
/* All display tiers render at weight 300 with negative tracking.             */
/* ========================================================================== */
.display-xxl { font-size: 56px; font-weight: 300; line-height: 1.03; letter-spacing: -1.4px;  }
.display-xl  { font-size: 48px; font-weight: 300; line-height: 1.15; letter-spacing: -0.96px; }
.display-lg  { font-size: 32px; font-weight: 300; line-height: 1.1;  letter-spacing: -0.64px; }
.display-md  { font-size: 26px; font-weight: 300; line-height: 1.12; letter-spacing: -0.26px; }

.heading-lg  { font-size: 22px; font-weight: 300; line-height: 1.1;  letter-spacing: -0.22px; }
.heading-md  { font-size: 20px; font-weight: 300; line-height: 1.4;  letter-spacing: -0.2px;  }
.heading-sm  { font-size: 18px; font-weight: 300; line-height: 1.4;  letter-spacing: 0;        }

.body-lg     { font-size: 16px; font-weight: 300; line-height: 1.4;  letter-spacing: 0;        }
.body-md     { font-size: 15px; font-weight: 300; line-height: 1.4;  letter-spacing: 0;        }
.body-tabular{ font-size: 14px; font-weight: 300; line-height: 1.4;  letter-spacing: -0.42px;
               font-feature-settings: var(--feat-ss01), var(--feat-tnum); }

.button-md   { font-size: 16px; font-weight: 400; line-height: 1.0;  letter-spacing: 0;        }
.button-sm   { font-size: 14px; font-weight: 400; line-height: 1.0;  letter-spacing: 0;        }

.caption     { font-size: 13px; font-weight: 400; line-height: 1.4;  letter-spacing: -0.39px;  }
.micro       { font-size: 11px; font-weight: 300; line-height: 1.4;  letter-spacing: 0;        }
.micro-cap   { font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px;
               text-transform: uppercase; }

/* numeric helper — apply to any money / count / transaction cell */
.tnum { font-feature-settings: var(--feat-ss01), var(--feat-tnum); }

/* ========================================================================== */
/* COMPONENT PRIMITIVES (reusable in HTML cards + kits)                       */
/* ========================================================================== */

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans); font-weight: 400; font-size: 16px;
  padding: var(--space-sm) var(--space-lg);     /* 8px 16px — never tighter */
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary    { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover   { background: var(--primary-deep); }
.btn-primary:active  { background: var(--primary-press); }
.btn-secondary  { background: var(--canvas); color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: #f3f1ff; }
.btn-on-dark    { background: var(--brand-dark-900); color: var(--on-primary); }
.btn-on-dark:hover   { background: #2a2d6b; }
.btn-sm         { font-size: 14px; padding: 6px 14px; }

/* Pill tag ----------------------------------------------------------------- */
.pill-tag-soft {
  display: inline-flex; align-items: center;
  background: var(--primary-bg-subdued-hover); color: var(--primary-deep);
  font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: 0.1px;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

/* Inputs ------------------------------------------------------------------- */
.text-input {
  background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); font-weight: 300; font-size: 15px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--hairline-input);
  border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.text-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83,58,253,0.12); }

/* Cards -------------------------------------------------------------------- */
.card-feature-light {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-xxl);
}
.card-cream-band {
  background: var(--canvas-cream); color: var(--ink);
  border-radius: var(--radius-lg); padding: var(--space-xxl);
}
.card-pricing-featured {
  background: var(--brand-dark-900); color: var(--on-primary);
  border-radius: var(--radius-lg); padding: var(--space-xxl);
}

/* Inline link -------------------------------------------------------------- */
.link-on-light { color: var(--primary); text-decoration: none; }
.link-on-light:hover { text-decoration: underline; }