/* =========================================================
   Pay(k)onnect Design System — Colors & Type
   Derived from the master logo: indigo ✕ emerald ✕ teal interlocking knot.
   Fonts retained from the existing product (Nunito Sans, Montserrat,
   Roboto Condensed); everything else built fresh.
   ========================================================= */

/* Webfonts ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;900&family=Montserrat:wght@500;600;700;800&family=Roboto+Condensed:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* FontAwesome 4 (legacy support, copied locally) */
@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.woff2') format('woff2'),
         url('fonts/fontawesome-webfont.woff')  format('woff'),
         url('fonts/fontawesome-webfont.ttf')   format('truetype');
    font-weight: normal; font-style: normal; font-display: block;
}

:root {
    /* ======================================================
       PRIMITIVES — color ramps
       ====================================================== */

    /* INDIGO — the master logo's blue strand · primary brand
       Note: the logo color (600) is the truth for the mark + divider.
       The UI primary uses 500, a calmer cousin, so large filled surfaces
       don't out-shout the mark itself. */
    --indigo-50:   #EEF0FF;
    --indigo-100:  #DEE1FF;
    --indigo-200:  #C2C6FC;
    --indigo-300:  #A5A9F4;
    --indigo-400:  #8487EE;
    --indigo-500:  #6063EE;
    --indigo-600:  #4949F2;   /* ★ LOGO blue strand — reserved for mark/divider */
    --indigo-700:  #3838CC;
    --indigo-800:  #2D2BA6;
    --indigo-900:  #21227A;
    --indigo-950:  #16165B;

    /* EMERALD — the master logo's bright green strand · growth + success
       Note: 500 is the logo color; the UI accent uses 600 so large filled
       surfaces feel less neon. */
    --emerald-50:  #ECFDF5;
    --emerald-100: #C6F7E1;
    --emerald-200: #8DEEC5;
    --emerald-300: #4FE0A6;
    --emerald-400: #2BD79A;
    --emerald-500: #14CC8F;   /* ★ LOGO emerald strand — reserved for mark/divider */
    --emerald-600: #0FA876;
    --emerald-700: #0E8462;
    --emerald-800: #105F4A;
    --emerald-900: #0F3E33;

    /* TEAL — the master logo's deep teal strand · secondary brand.
       Stops 300-500 desaturated from a pure CMYK teal to a quieter slate-teal
       so the color fills calmly in UI. 600 remains the saturated mark color. */
    --teal-50:     #ECF5F2;
    --teal-100:    #C8E5DC;
    --teal-200:    #93CDBE;
    --teal-300:    #65B4A1;
    --teal-400:    #4A9C89;
    --teal-500:    #2F8A77;
    --teal-600:    #08806F;   /* ★ LOGO teal strand — reserved for mark/divider */
    --teal-700:    #08665A;
    --teal-800:    #064A41;
    --teal-900:    #053A33;

    /* SLATE — neutrals, faintly violet-cool to harmonize with indigo */
    --slate-ink:   #14172A;   /* near-black, used for body strong text */
    --slate-950:   #181B30;
    --slate-900:   #1F2335;
    --slate-800:   #2A2F45;
    --slate-700:   #3F4459;
    --slate-600:   #565B72;
    --slate-500:   #7B7F95;   /* approx. matches logo wordmark gray */
    --slate-400:   #A2A6B8;
    --slate-300:   #C7CAD8;
    --slate-200:   #DEE0EC;
    --slate-100:   #ECEEF5;
    --slate-50:    #F5F6FB;
    --canvas:      #F8F9FC;   /* page background, off-white cool */
    --surface:     #FFFFFF;
    --ribbon:      #FAFBFE;   /* card header tint */

    /* AMBER — warning · slightly warmed to break up the cool palette */
    --amber-50:    #FFF8EC;
    --amber-100:   #FFEACA;
    --amber-200:   #FFD58E;
    --amber-400:   #F9B04B;
    --amber-500:   #ED9B1E;
    --amber-600:   #C97D0F;
    --amber-800:   #7C4A0A;

    /* ROSE — error · purpled red so it sits alongside indigo without clashing */
    --rose-50:     #FEF1F4;
    --rose-100:    #FCDCE3;
    --rose-200:    #F9B6C4;
    --rose-400:    #F26A89;
    --rose-500:    #EC4470;
    --rose-600:    #D62759;
    --rose-800:    #971A3C;

    /* PLUM — destructive admin / godmode-style accent */
    --plum-100:    #F3E8FE;
    --plum-500:    #9248E8;
    --plum-700:    #6B23B8;

    /* ======================================================
       SEMANTIC TOKENS — use these in component CSS
       ====================================================== */

    /* Backgrounds */
    --bg-canvas:   var(--canvas);
    --bg-surface:  var(--surface);
    --bg-surface-2:var(--ribbon);
    --bg-muted:    var(--slate-50);
    --bg-inset:    var(--slate-100);
    --bg-dark:     var(--slate-900);
    --bg-darker:   var(--slate-ink);

    /* Foregrounds */
    --fg-strong:   var(--slate-ink);
    --fg-default:  var(--slate-700);
    --fg-muted:    var(--slate-500);
    --fg-subtle:   var(--slate-400);
    --fg-on-dark:  #E8EAF3;
    --fg-on-dark-muted: #A5A9C0;

    /* Brand — primary indigo.
       `--brand` is the calmer UI primary (indigo-500); `--brand-mark`
       is the master-logo strand color, used only on the mark itself
       and the brand divider. Same split for the accent. */
    --brand:           var(--indigo-400);
    --brand-mark:      var(--indigo-600);
    --brand-hover:     var(--indigo-500);
    --brand-active:    var(--indigo-600);
    --brand-tint:      var(--indigo-50);
    --brand-tint-2:    var(--indigo-100);
    --brand-border:    var(--indigo-200);
    --brand-fg-on-tint:var(--indigo-800);

    /* Accent — emerald (growth, success, money) */
    --accent:          var(--emerald-400);
    --accent-mark:     var(--emerald-500);
    --accent-hover:    var(--emerald-500);
    --accent-tint:     var(--emerald-50);
    --accent-border:   var(--emerald-200);
    --accent-fg-on-tint:var(--emerald-800);

    /* Deep brand — teal. UI uses the softer 400; --deep-mark is the
       saturated logo strand, reserved for the mark + brand divider. */
    --deep:            var(--teal-400);
    --deep-mark:       var(--teal-600);
    --deep-tint:       var(--teal-50);
    --deep-fg-on-tint: var(--teal-800);

    /* Borders */
    --border-hairline: var(--slate-100);
    --border-soft:     var(--slate-200);
    --border-default:  var(--slate-300);
    --border-strong:   var(--slate-400);

    /* Status (semantic, not raw) */
    --success-bg:  var(--emerald-50);
    --success-fg:  var(--emerald-800);
    --success-bd:  var(--emerald-200);
    --success-dot: var(--emerald-500);

    --warning-bg:  var(--amber-50);
    --warning-fg:  var(--amber-800);
    --warning-bd:  var(--amber-200);
    --warning-dot: var(--amber-500);

    --error-bg:    var(--rose-50);
    --error-fg:    var(--rose-800);
    --error-bd:    var(--rose-200);
    --error-dot:   var(--rose-500);

    --info-bg:     var(--indigo-50);
    --info-fg:     var(--indigo-800);
    --info-bd:     var(--indigo-200);
    --info-dot:    var(--indigo-600);

    /* Focus ring — soft, low-opacity indigo */
    --focus-ring:  0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);

    /* ======================================================
       RADII — slightly larger than the codebase for a more
       modern, fintech feel
       ====================================================== */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;   /* buttons, inputs */
    --r-lg:   14px;   /* row tiles, badges-pill-large */
    --r-xl:   20px;   /* cards, modals */
    --r-2xl:  28px;   /* hero panels */
    --r-pill: 999px;

    /* ======================================================
       SHADOWS — softer, layered, ink-tinted
       ====================================================== */
    --shadow-xs:  0 1px 2px rgba(20, 23, 42, .04);
    --shadow-sm:  0 2px 6px rgba(20, 23, 42, .06), 0 1px 2px rgba(20, 23, 42, .04);
    --shadow-md:  0 6px 16px rgba(20, 23, 42, .08), 0 2px 4px rgba(20, 23, 42, .04);
    --shadow-lg:  0 16px 32px rgba(20, 23, 42, .10), 0 4px 8px rgba(20, 23, 42, .06);
    --shadow-xl:  0 32px 64px rgba(20, 23, 42, .12), 0 12px 24px rgba(20, 23, 42, .08);
    --shadow-brand-glow: 0 6px 18px rgba(96, 99, 238, .16);

    /* Inner shadow used on input fields when pressed/inset */
    --shadow-inset: inset 0 1px 0 rgba(20, 23, 42, .03);

    /* ======================================================
       SPACING — 4pt grid
       ====================================================== */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10:72px;
    --sp-11:96px;
    --sp-12:128px;

    /* ======================================================
       TYPOGRAPHY — primitives
       ====================================================== */
    --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Montserrat", "Nunito Sans", system-ui, sans-serif;
    --font-eyebrow: "Roboto Condensed", "Helvetica Neue", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale — 1.20 modular ratio */
    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 44px;
    --fs-5xl: 60px;

    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.5;
    --lh-loose:  1.6;

    --tracking-tight:   -0.022em;
    --tracking-display: -0.015em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;
    --tracking-eyebrow: 0.12em;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background: var(--bg-canvas);
    color: var(--fg-default);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.pk-display-hero {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-5xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-strong);
}
.pk-display, .pk-h1, h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-strong);
}
.pk-h2, h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-strong);
}
.pk-h3, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-2xl);
    line-height: var(--lh-snug);
    color: var(--fg-strong);
}
.pk-h4, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--fg-strong);
}
.pk-h5, h5 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--fg-strong);
}
.pk-h6, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--fg-strong);
}

.pk-body         { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 400; color: var(--fg-default); line-height: var(--lh-normal); }
.pk-body-strong  { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 600; color: var(--fg-strong); }
.pk-body-lg      { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 400; color: var(--fg-default); line-height: var(--lh-loose); }
.pk-small        { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--fg-default); }
.pk-small-muted  { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--fg-muted); }
.pk-meta         { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--fg-muted); }

.pk-eyebrow {
    font-family: var(--font-eyebrow);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--fg-muted);
}
.pk-eyebrow-strong {
    font-family: var(--font-eyebrow);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--fg-strong);
}

.pk-data {
    font-family: var(--font-body);
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums;
}
.pk-mono {
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--fg-default);
}

.pk-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.pk-link:hover { border-bottom-color: var(--brand); }