/* ============================================================
   Stripe-inspired Design System — colors_and_type.css
   ============================================================
   The two foundations: every color token, every type token, plus
   base element styles. Import this once at the top of any HTML
   file in this design system.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Primary: sohne-var (custom, not bundled). Falls back to Inter. */
/* Drop /fonts/sohne-var.woff2 here and the @font-face rule activates. */

@font-face {
  font-family: "sohne-var";
  src: url("./fonts/sohne-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Source+Code+Pro:wght@400;500;700&display=swap");

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* Primary brand */
  --color-purple:            #533afd; /* Stripe Purple — primary brand & CTA */
  --color-purple-hover:      #4434d4; /* Hover on primary */
  --color-purple-deep:       #2e2b8c; /* Icon hover, deeper accent */
  --color-purple-mid:        #665efd; /* Range/input highlight */
  --color-purple-light:      #b9b9f9; /* Lavender border / subdued hover */
  --color-purple-soft:       #d6d9fc; /* Subtle purple-tinted border */
  --color-purple-dashed:     #362baa; /* Dashed border drop-zones */

  /* Brand neutrals & dark */
  --color-bg:                #ffffff; /* Page background */
  --color-heading:           #061b31; /* Deep navy, all headings */
  --color-label:             #273951; /* Dark slate, form labels */
  --color-body:              #64748d; /* Slate, body copy */
  --color-brand-dark:        #1c1e54; /* Brand dark — full-width sections */
  --color-dark-navy:         #0d253d; /* Darkest neutral */

  /* Decorative accents (gradient only — never buttons/links) */
  --color-ruby:              #ea2261;
  --color-magenta:           #f96bee;
  --color-magenta-light:     #ffd7ef;

  /* Semantic */
  --color-success:           #15be53;
  --color-success-text:      #108c3d;
  --color-success-bg:        rgba(21, 190, 83, 0.20);
  --color-success-border:    rgba(21, 190, 83, 0.40);
  --color-lemon:             #9b6829;

  /* Borders & surfaces */
  --color-border:            #e5edf5; /* Default border */
  --color-border-purple:     var(--color-purple-light);
  --color-border-soft:       var(--color-purple-soft);
  --color-border-magenta:    var(--color-magenta-light);
  --surface-card:            #ffffff;
  --surface-subtle:          #f6f9fc;

  /* Shadow tokens (compose into shadows below) */
  --shadow-blue:             rgba(50, 50, 93, 0.25);
  --shadow-deep-blue:        rgba(3, 3, 39, 0.25);
  --shadow-black:            rgba(0, 0, 0, 0.10);
  --shadow-ambient:          rgba(23, 23, 23, 0.08);
  --shadow-soft:             rgba(23, 23, 23, 0.06);
  --shadow-top:              rgba(0, 55, 112, 0.08);

  /* Composed shadow scale */
  --elev-0:                  none;
  --elev-1:                  0 3px 6px var(--shadow-soft);
  --elev-2:                  0 15px 35px 0 var(--shadow-ambient);
  --elev-3:                  0 30px 45px -30px var(--shadow-blue),
                             0 18px 36px -18px var(--shadow-black);
  --elev-4:                  0 14px 21px -14px var(--shadow-deep-blue),
                             0 8px 17px -8px var(--shadow-black);
  --focus-ring:              0 0 0 2px var(--color-purple);

  /* ============================================================
     SPACING TOKENS — dense at the small end (Stripe precision)
     ============================================================ */
  --space-px:    1px;
  --space-0-5:   2px;
  --space-1:     4px;
  --space-1-5:   6px;
  --space-2:     8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ============================================================
     RADII — conservative, 4–8px only
     ============================================================ */
  --radius-micro:       1px;
  --radius:             4px;  /* default */
  --radius-comfortable: 5px;
  --radius-relaxed:     6px;
  --radius-large:       8px;

  /* ============================================================
     TYPE TOKENS
     ============================================================ */
  --font-sans:  "sohne-var", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "Source Code Pro", "SourceCodePro", "SFMono-Regular", ui-monospace, monospace;

  /* Display & headings */
  --type-hero-size:        56px;
  --type-hero-lh:          1.03;
  --type-hero-tracking:   -1.4px;

  --type-display-size:     48px;
  --type-display-lh:       1.15;
  --type-display-tracking:-0.96px;

  --type-section-size:     32px;
  --type-section-lh:       1.10;
  --type-section-tracking:-0.64px;

  --type-subhead-lg-size:  26px;
  --type-subhead-lg-lh:    1.12;
  --type-subhead-lg-tracking: -0.26px;

  --type-subhead-size:     22px;
  --type-subhead-lh:       1.10;
  --type-subhead-tracking:-0.22px;

  /* Body */
  --type-body-lg-size:     18px;
  --type-body-lg-lh:       1.40;
  --type-body-size:        16px;
  --type-body-lh:          1.40;

  /* UI */
  --type-button-size:      16px;
  --type-button-sm-size:   14px;
  --type-link-size:        14px;
  --type-caption-size:     13px;
  --type-caption-sm-size:  12px;
  --type-caption-tab-tracking: -0.36px;
  --type-micro-size:       10px;
  --type-micro-tracking:    0.1px;
  --type-nano-size:         8px;

  /* Code */
  --type-code-size:        12px;
  --type-code-lh:          2.00;
  --type-code-micro-size:   9px;
}

/* ============================================================
   BASE — applied automatically to common elements
   ============================================================ */

html, body {
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-weight: 300;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-sans);
  font-weight: 300;
  font-feature-settings: "ss01";
  margin: 0;
}

h1 {
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-lh);
  letter-spacing: var(--type-hero-tracking);
}
h2 {
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-tracking);
}
h3 {
  font-size: var(--type-section-size);
  line-height: var(--type-section-lh);
  letter-spacing: var(--type-section-tracking);
}
h4 {
  font-size: var(--type-subhead-lg-size);
  line-height: var(--type-subhead-lg-lh);
  letter-spacing: var(--type-subhead-lg-tracking);
}
h5 {
  font-size: var(--type-subhead-size);
  line-height: var(--type-subhead-lh);
  letter-spacing: var(--type-subhead-tracking);
}

p {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: 300;
  font-feature-settings: "ss01";
  margin: 0;
}

a {
  color: var(--color-purple);
  text-decoration: none;
  font-weight: 400;
  font-feature-settings: "ss01";
  font-size: var(--type-link-size);
}
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  font-weight: 500;
  line-height: var(--type-code-lh);
}

/* Tabular figures helper — apply to data displays */
.tnum { font-feature-settings: "tnum"; letter-spacing: var(--type-caption-tab-tracking); }

/* Eyebrow / section label — ALL CAPS tracked */
.eyebrow {
  font-size: 12px;
  font-weight: 400;
  font-feature-settings: "ss01";
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-purple);
}

/* ============================================================
   BUTTONS — base classes
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--type-button-size);
  font-weight: 400;
  font-feature-settings: "ss01";
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn-primary {
  background: var(--color-purple);
  color: #fff;
}
.btn-primary:hover { background: var(--color-purple-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-purple);
  border-color: var(--color-purple-light);
}
.btn-ghost:hover { background: rgba(83, 58, 253, 0.05); }

.btn-info {
  background: transparent;
  color: #2874ad;
  border-color: rgba(43, 145, 223, 0.20);
}

.btn-sm { padding: 6px 12px; font-size: var(--type-button-sm-size); }

/* ============================================================
   CARD — base
   ============================================================ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-relaxed);
  padding: 24px;
  box-shadow: var(--elev-3);
}
.card-flat   { box-shadow: var(--elev-0); }
.card-ambient{ box-shadow: var(--elev-2); }

/* ============================================================
   BADGE
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 300;
  font-feature-settings: "ss01";
  border: 1px solid var(--color-border);
}
.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}
.badge-neutral {
  background: #fff;
  color: #000;
  border-color: var(--surface-subtle);
  font-size: 11px;
  font-weight: 400;
  padding: 0 6px;
}

/* ============================================================
   INPUT — base
   ============================================================ */

.input {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  color: var(--color-heading);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: 300;
  font-feature-settings: "ss01";
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.input::placeholder { color: var(--color-body); }
.input:focus {
  outline: none;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.15);
}

.label {
  display: block;
  font-size: var(--type-button-sm-size);
  font-weight: 400;
  color: var(--color-label);
  margin-bottom: 6px;
  font-feature-settings: "ss01";
}

/* ============================================================
   DARK BRAND SECTION
   ============================================================ */

.section-dark {
  background: var(--color-brand-dark);
  color: #fff;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, 0.7); }