/* ========================================================================
   Vanaways Design System — Colors & Type
   Sources of truth (merged & reconciled):
   - uploads/Brand Guidelines.pdf (official palette + type pairing)
   - proposals/tailwind.config.js  (extended brand scales, gradient)
   - proposals/app/globals.css     (body/heading/button class patterns)
   - payment portal next/src/app/globals.css (sizing + spacing tokens)

   Lato / Open Sans are loaded from Google Fonts here for convenience.
   If you want to self-host, drop files into /fonts and swap the @import.
   ======================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root {
  /* ─── Brand palette (from Brand Guidelines.pdf) ────────────────────── */
  --brand-blue:        #114598;
  --brand-red:         #e92a3e;
  --brand-dark-grey:   #5d5f65;
  --brand-light-grey:  #d9d6dd;

  /* Primary scale — extends the brand blue (proposals/tailwind.config.js) */
  --primary-50:  #e8eef7;
  --primary-100: #c5d4eb;
  --primary-200: #9fb8de;
  --primary-300: #789cd1;
  --primary-400: #5b87c7;
  --primary-500: #114598;  /* = --brand-blue */
  --primary-600: #0f3d88;
  --primary-700: #0c3375;
  --primary-800: #0a2962;
  --primary-900: #061a42;

  /* Accent scale — extends the brand red */
  --accent-50:  #fde8ea;
  --accent-100: #f9c5ca;
  --accent-200: #f49fa7;
  --accent-300: #f07884;
  --accent-400: #ec5b69;
  --accent-500: #e92a3e;  /* = --brand-red */
  --accent-600: #d42537;
  --accent-700: #b51f2f;
  --accent-800: #961927;
  --accent-900: #641119;

  /* Neutral scale (Tailwind slate-aligned, used in payment portal) */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ─── Semantic colors ──────────────────────────────────────────────── */
  --color-success:      #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning:      #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-error:        var(--brand-red);
  --color-error-soft:   #fde8ea;
  --color-info:         var(--brand-blue);
  --color-info-soft:    var(--primary-50);

  /* Foreground / background */
  --fg-1: var(--brand-dark-grey);   /* default body text */
  --fg-2: #7a7c82;                   /* muted copy */
  --fg-3: #9ca1a8;                   /* captions, disabled */
  --fg-inverse: #ffffff;
  --fg-heading: #1a1d24;             /* darker, tighter headings */

  --bg-1: #ffffff;                   /* page */
  --bg-2: #f8f9fc;                   /* subtle section fill */
  --bg-3: #f1f3f8;                   /* deeper section fill */
  --bg-brand: var(--brand-blue);     /* on-brand panels */
  --bg-brand-deep: #0a2962;          /* navy fleet hero */

  /* Gradients (from proposals/app/globals.css) */
  --gradient-brand:   linear-gradient(135deg, #114598 0%, #0c3375 100%);
  --gradient-red:     linear-gradient(180deg, #e92a3e 0%, #c51f2f 100%);
  --gradient-paper:   linear-gradient(180deg, #f7f8fb 0%, #ffffff 58%, #f1f5f9 100%);
  --gradient-hero-ambient:
    radial-gradient(900px 420px at 18% 8%, rgba(233,42,62,.10), transparent 55%),
    radial-gradient(900px 520px at 85% 12%, rgba(17,69,152,.12), transparent 60%),
    linear-gradient(180deg, #f7f8fb 0%, #ffffff 58%, #f1f5f9 100%);

  /* ─── Typography ──────────────────────────────────────────────────── */
  --font-heading: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Open Sans", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-2xs: 10px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  --fs-6xl: 48px;
  --fs-display: 64px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ─── Spacing ──────────────────────────────────────────────────────── */
  --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: 100px;

  /* ─── Radii ────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-pill:9999px;

  /* ─── Shadows ──────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(17, 23, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(17,23,40,.10), 0 2px 4px -2px rgba(17,23,40,.06);
  --shadow-lg: 0 10px 15px -3px rgba(17,23,40,.10), 0 4px 6px -4px rgba(17,23,40,.05);
  --shadow-xl: 0 20px 25px -5px rgba(17,23,40,.10), 0 8px 10px -6px rgba(17,23,40,.05);
  --shadow-2xl:0 25px 50px -12px rgba(0, 0, 0, .25);
  --shadow-brand: 0 12px 28px rgba(17, 69, 152, .22);
  --shadow-red:   0 12px 28px rgba(233, 42, 62, .22);

  /* ─── Motion ───────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(.2,.8,.2,1);
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;

  /* ─── Borders ──────────────────────────────────────────────────────── */
  --border-default: 1px solid var(--brand-light-grey);
  --border-strong:  2px solid var(--brand-light-grey);
  --border-focus:   2px solid var(--brand-blue);
}

/* ================= Semantic text element styles ======================== */

body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  color: var(--fg-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

.t-display {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h1, .t-h1 { font-size: clamp(28px, 3.2vw, var(--fs-5xl)); }
h2, .t-h2 { font-size: clamp(24px, 2.6vw, var(--fs-4xl)); }
h3, .t-h3 { font-size: clamp(20px, 2.0vw, var(--fs-2xl)); }
h4, .t-h4 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h5, .t-h5 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
h6, .t-h6 { font-size: var(--fs-md); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; }

.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-blue);
}

p, .t-body     { font-size: var(--fs-md); line-height: var(--lh-base); color: var(--fg-1); }
.t-body-sm     { font-size: var(--fs-sm); line-height: var(--lh-base); }
.t-body-lg     { font-size: var(--fs-lg); line-height: var(--lh-base); }
.t-lead        { font-size: clamp(16px, 1.25vw, var(--fs-xl)); line-height: var(--lh-base); color: var(--fg-2); }

.t-muted       { color: var(--fg-2); }
.t-faint       { color: var(--fg-3); }
.t-caption     { font-size: var(--fs-xs); color: var(--fg-3); }

.t-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.t-price {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-3xl);
  color: var(--brand-red);
  letter-spacing: -0.01em;
}
.t-price-sm { font-size: var(--fs-xl); }

.t-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-default);
}
a:hover { color: var(--primary-700); }