/* =============================================================
   Autopay Web Marketing Design System — Colors & Typography
   ============================================================= */

/* Fonts: all four brand faces are self-hosted from fonts/.
   • Whyte Inktrap — display headlines, numerals
   • ABC Whyte — body, UI, labels (Regular 400 + Medium 500)
   • Graphik Cond Alt Semibold — extra-condensed display option for stats
     and special headers
   • Fjalla One — kept as a redundant fallback only
   ============================================================*/
@font-face {
  font-family: "Whyte Inktrap";
  src: url("fonts/WhyteInktrap-Regular.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Whyte";
  src: url("fonts/ABCWhyte-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Whyte";
  src: url("fonts/ABCWhyte-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Cond Alt";
  src: url("fonts/GraphikCondAlt-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fjalla One";
  src: url("fonts/FjallaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand colors ───────────────────────────────────────────── */
  /* Autopay Blue scale — derived from the figma usage counts */
  --ap-blue-50:  #E6F4FF;   /* near-white tint, hover surfaces */
  --ap-blue-100: #D1EBFE;   /* "soft sky" — section bgs, cards */
  --ap-blue-200: #B6DEFD;   /* mid sky, gradient mid-stop */
  --ap-blue-300: #A3D7FD;   /* "industry card" sky blue */
  --ap-blue-400: #75C3FC;   /* hero gradient top, mid */
  --ap-blue-500: #199BFA;   /* signet / accent blue */
  --ap-blue-600: #0C73BD;   /* primary CTA blue */
  --ap-blue-700: #0D4E7D;   /* "dark section" deep blue */
  --ap-blue-800: #0D3E5C;   /* deepest navy */
  --ap-blue-900: #082F4B;   /* near-black blue, body on light */

  /* Pistachio — signature CTA + brand surface (Autopay Holding footer) */
  --ap-pistachio:        #E6FFA0;
  --ap-pistachio-dark:   #C1FF9A;   /* "Access granted" success pill */
  --ap-pistachio-border: #ADBF78;   /* footer pistachio border */
  --ap-pistachio-text:   #738050;   /* on-pistachio secondary text */

  /* Neutrals — almost every text colour traces back here */
  --ap-ink-900:  #0F0F0F;   /* deep text (rare) */
  --ap-ink-800:  #282828;   /* PRIMARY body / heading text */
  --ap-ink-700:  #4C4C4C;   /* secondary text */
  --ap-ink-600:  #666666;   /* tertiary text */
  --ap-ink-500:  #808080;   /* muted */
  --ap-ink-400:  #CCCCCC;   /* hairlines & disabled border */
  --ap-ink-300:  #E5E5E5;   /* borders */
  --ap-ink-200:  #EBEBEB;   /* dividers */
  --ap-ink-100:  #F0F0F0;   /* eyebrow / neutral pill */
  --ap-ink-50:   #F5F5F5;   /* input bg, surface alt */
  --ap-ink-25:   #FAFAFA;   /* page bg (off-white) */
  --ap-white:    #FFFFFF;

  /* Status — extracted from in-line transaction-card pills */
  --ap-success-bg:   #C1FF9A;
  --ap-success-fg:   #338400;
  --ap-warning-bg:   #FFF3B8;
  --ap-warning-fg:   #AB8404;
  --ap-danger-bg:    #FFD9D9;
  --ap-danger-fg:    #C8102E;
  --ap-info-bg:      #D1EBFE;
  --ap-info-fg:      #0C73BD;

  /* ── Semantic surface tokens ────────────────────────────────── */
  --bg-page:        var(--ap-ink-25);
  --bg-surface:     var(--ap-white);
  --bg-inverted:    var(--ap-ink-800);
  --bg-deep:        var(--ap-blue-700);     /* "deep section" hero */
  --bg-sky:         var(--ap-blue-100);
  --bg-eyebrow:     var(--ap-ink-100);

  --fg-default:     var(--ap-ink-800);
  --fg-muted:       var(--ap-ink-700);
  --fg-subtle:      var(--ap-ink-600);
  --fg-inverted:    var(--ap-white);
  --fg-accent:      var(--ap-blue-600);

  --border-default: var(--ap-ink-300);
  --border-strong:  var(--ap-ink-400);
  --border-ink:     var(--ap-ink-800);  /* ghost-inverse button border */

  /* ── Type families ──────────────────────────────────────────── */
  --font-display:   "Whyte Inktrap", "Fjalla One", system-ui, sans-serif;
  --font-condensed: "Graphik Cond Alt", "Fjalla One", "Whyte Inktrap", system-ui, sans-serif;
  --font-body:      "ABC Whyte", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale ─────────────────────────────────────────────── */
  /* Display (Whyte Inktrap) — headlines, big numerals, hero. The face is
     wide with pronounced inktraps; carry tight negative tracking. */
  --t-display-1: 500 64px/1.15 var(--font-display);   /* hero */
  --t-display-2: 500 56px/1.15 var(--font-display);
  --t-display-3: 500 48px/1.15 var(--font-display);
  --t-display-4: 500 40px/1.15 var(--font-display);
  --t-headline:  500 32px/1.15 var(--font-display);
  --t-title:     500 24px/1.25 var(--font-display);

  /* Body (ABC Whyte) — UI copy, descriptions. */
  --t-lead:      400 20px/1.4  var(--font-body);
  --t-body:      400 18px/1.4  var(--font-body);
  --t-base:      400 16px/1.4  var(--font-body);
  --t-sm:        400 14px/1.4  var(--font-body);
  --t-xs:        400 12px/1.4  var(--font-body);

  --t-label:     500 14px/1    var(--font-body);
  --t-button:    500 16px/1.25 var(--font-body);
  --t-eyebrow:   400 14px/1    var(--font-body);     /* uppercase, tracked */

  --letter-display: -0.020em;    /* tight inktrap titles */
  --letter-eyebrow:  0.04em;     /* slight tracking on caps eyebrows */

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-xs:  4px;   /* checkbox */
  --radius-sm:  8px;   /* secondary buttons, inputs-rectangular */
  --radius-md:  10px;  /* text fields */
  --radius-lg:  16px;  /* nav capsule, card inner */
  --radius-xl:  24px;  /* large cards, primary pill button */
  --radius-2xl: 32px;
  --radius-pill: 9999px; /* eyebrow pills, status badges, primary CTA pill */

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-card:    0 7px 29px 0 rgba(153, 153, 153, 0.2);
  --shadow-soft:    0 4px 12px 0 rgba(10, 13, 18, 0.05);
  --shadow-strong:  0 10px 40px 0 rgba(10, 13, 18, 0.10);
  --shadow-inset:   inset 0 1px 0 0 rgba(255, 255, 255, 0.5);

  /* ── Spacing scale (8-pt base) ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --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;
  --space-32: 128px;

  /* ── Container widths ───────────────────────────────────────── */
  --container:        1248px;  /* design canvas content */
  --container-page:   1440px;  /* full frame */
  --gutter:           96px;
  --gutter-narrow:    60px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
}

/* =============================================================
   Resets + global type defaults
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font: var(--t-base);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic element styles — apply tokens directly */
h1, .ap-h1 { font: var(--t-display-1); letter-spacing: var(--letter-display); color: var(--fg-default); margin: 0; }
h2, .ap-h2 { font: var(--t-display-2); letter-spacing: var(--letter-display); color: var(--fg-default); margin: 0; }
h3, .ap-h3 { font: var(--t-display-3); letter-spacing: var(--letter-display); color: var(--fg-default); margin: 0; }
h4, .ap-h4 { font: var(--t-display-4); letter-spacing: var(--letter-display); color: var(--fg-default); margin: 0; }
h5, .ap-h5 { font: var(--t-headline);  letter-spacing: var(--letter-display); color: var(--fg-default); margin: 0; }
h6, .ap-h6 { font: var(--t-title);     color: var(--fg-default); margin: 0; }

p, .ap-p  { font: var(--t-body); color: var(--fg-muted); margin: 0; }
.ap-lead  { font: var(--t-lead); color: var(--fg-muted); }
.ap-small { font: var(--t-sm);   color: var(--fg-subtle); }

.ap-eyebrow {
  display: inline-block;
  font: var(--t-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--fg-default);
  background: var(--bg-eyebrow);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }

/* Utility */
.ap-container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter-narrow); }
.ap-stack > * + * { margin-top: var(--space-6); }