/* ==========================================================================
   Design System — shared tokens + components (source: Figma design-system
   frames: Colors, Typography, Button).

   This file is the single source of truth for these values. It is enqueued
   after global.css/style.css, so redefining a class name here (e.g.
   .display-1, .btn-primary) updates every place already using that class —
   edit the value once here, it reflects everywhere.
   ========================================================================== */

:root {
    /* ---------- Colors (Figma "Colors" frame, Primary palette) ---------- */
    --ds-color-primary: #0883dd;
    --ds-color-primary-hover: #066bb3;
    --ds-color-dark: #111827;
    --ds-color-subtext: #8d8d8e;
    --ds-color-maintext: #231f20;
    --ds-color-white: #ffffff;
    --ds-color-tint: #eff4ff;
    --ds-color-gray: #c2c6d6;
    /* NOTE: the Figma "Green" swatch renders teal but its exported hex label
       (#1C1B1C) is identical to "Main Text" above it — almost certainly a
       copy/paste slip in that export. Using a close approximation until the
       real value is confirmed. */
    --ds-color-green: #1e7f72;
    --ds-color-accent: #31aaec;
    --ds-gradient-text: linear-gradient(90deg, #31aaec 28.27%, #167cb4 82.58%);

    /* ---------- Figma variable aliases (keeps pasted Figma CSS resolving to real tokens) ---------- */
    --Main-Color-Main-Color: var(--ds-color-accent);
    --Main-Color-White: var(--ds-color-white);
    --Main-Color-Gray: var(--ds-color-gray);
    --Main-Color-Main-Text: var(--ds-color-maintext);
    --Main-Color-Sub-text: var(--ds-color-subtext);
    --Main-Color-Light-Bg: var(--ds-color-tint);
    --Main-Color-Dark: var(--ds-color-dark);
    --Main-Dark-Color: #00171f;
    --Gradient-Text: var(--ds-gradient-text);

    --ds-color-disabled-bg: #e7e9ec;
    --ds-color-disabled-text: #a7adb3;
    --ds-color-disabled-border: var(--ds-color-gray);

    /* ---------- Shared dark-surface tokens (header / hero / footer) ---------- */
    --ds-navy: #0a1526;
    --ds-navy-soft: #0f2033;
    --ds-navy-950: #081121;
    --ds-glow: radial-gradient(60.26% 89.58% at 50% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
    --ds-hero-glow: radial-gradient(89.58% 60.26% at 50% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
    --ds-stripe-color: rgba(255, 255, 255, 0.08);
    --ds-stripe-gap: 120px;
    --ds-header-h: 88px;
    --ds-hero-bg: linear-gradient(180deg, #052536 0%, #021b28 100%);

    /* ---------- Fonts ---------- */
    --ds-font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --ds-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

    /* ---------- Type scale (Figma "Typography" frame) ---------- */
    --ds-display-1-size: 5.5rem;   /* 88px */
    --ds-display-1-height: 6rem;
    --ds-display-2-size: 4.25rem;  /* 68px */
    --ds-display-2-height: 4.75rem;
    --ds-display-3-size: 3.25rem;  /* 52px */
    --ds-display-3-height: 3.75rem;
    --ds-display-4-size: 3rem;     /* 48px */
    --ds-display-4-height: 3.75rem; /* 125% = 60px */
    --ds-display-5-size: 2.5rem;   /* 40px */
    --ds-display-5-height: 3rem;
    --ds-display-6-size: 2rem;     /* 32px */
    --ds-display-6-height: 2.7rem; /* 135% = 43.2px */

    --ds-heading-lg-size: 1.5rem;    /* 24px */
    --ds-heading-lg-height: 1.75rem;
    --ds-heading-md-size: 1.25rem;   /* 20px */
    --ds-heading-md-height: 1.5rem;
    --ds-heading-sm-size: 1.125rem;  /* 18px */
    --ds-heading-sm-height: 1.5rem;

    --ds-body-lg-size: 1.125rem;  /* 18px */
    --ds-body-lg-height: 27.9px;  /* 155% */
    --ds-body-md-size: 1rem;      /* 16px */
    --ds-body-md-height: 1.5rem;
    --ds-body-sm-size: 0.875rem;  /* 14px */
    --ds-body-sm-height: 1.25rem;
    --ds-body-xs-size: 0.75rem;   /* 12px */
    --ds-body-xs-height: 1rem;

    /* ---------- Button sizes (Figma "Button" frame) ---------- */
    --ds-btn-lg-h: 56px;
    --ds-btn-lg-px: 2rem;
    --ds-btn-lg-fs: var(--ds-body-md-size);
    --ds-btn-md-h: 48px;
    --ds-btn-md-px: 1.5rem;
    --ds-btn-md-fs: 0.9375rem;
    --ds-btn-sm-h: 40px;
    --ds-btn-sm-px: 1.25rem;
    --ds-btn-sm-fs: var(--ds-body-sm-size);
    --ds-btn-xs-h: 32px;
    --ds-btn-xs-px: 1rem;
    --ds-btn-xs-fs: 0.8125rem;
}

.eyebrow {
    color: var(--ds-color-accent, #31aaec);
    font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 155%; /* 21.7px */
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--ds-font-display);
    font-weight: 700;
}

.display-1 { font-size: var(--ds-display-1-size); line-height: var(--ds-display-1-height); }
.display-2 { font-size: var(--ds-display-2-size); line-height: var(--ds-display-2-height); }
.display-3 { font-size: var(--ds-display-3-size); line-height: var(--ds-display-3-height); }
.display-4 { font-size: var(--ds-display-4-size); line-height: var(--ds-display-4-height); font-weight: 600; }
.display-5 { font-size: var(--ds-display-5-size); line-height: var(--ds-display-5-height); }
.display-6 { font-size: var(--ds-display-6-size); line-height: var(--ds-display-6-height); font-weight: 600; }

/* Gradient-clip text — reusable accent treatment (hero stat highlight, headings) */
.ds-gradient-text {
    background: var(--ds-gradient-text, linear-gradient(90deg, #31aaec 28.27%, #167cb4 82.58%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.heading-lg, .heading-md, .heading-sm {
    font-family: var(--ds-font-display);
    font-weight: 700;
}

.heading-lg { font-size: var(--ds-heading-lg-size); line-height: var(--ds-heading-lg-height); }
.heading-md { font-size: var(--ds-heading-md-size); line-height: var(--ds-heading-md-height); }
.heading-sm { font-size: var(--ds-heading-sm-size); line-height: var(--ds-heading-sm-height); }

.body-lg, .body-lg-semibold, .body-lg-bold,
.body-md, .body-md-semibold, .body-md-bold,
.body-sm, .body-sm-semibold, .body-sm-bold,
.body-xs, .body-xs-semibold, .body-xs-bold {
    font-family: var(--ds-font-body);
}

.body-lg, .body-lg-semibold, .body-lg-bold { font-size: var(--ds-body-lg-size); line-height: var(--ds-body-lg-height); }
.body-md, .body-md-semibold, .body-md-bold { font-size: var(--ds-body-md-size); line-height: var(--ds-body-md-height); }
.body-sm, .body-sm-semibold, .body-sm-bold { font-size: var(--ds-body-sm-size); line-height: var(--ds-body-sm-height); }
.body-xs, .body-xs-semibold, .body-xs-bold { font-size: var(--ds-body-xs-size); line-height: var(--ds-body-xs-height); }

.body-lg, .body-md, .body-sm, .body-xs { font-weight: 400; }
.body-lg-semibold, .body-md-semibold, .body-sm-semibold, .body-xs-semibold { font-weight: 600; }
.body-lg-bold, .body-md-bold, .body-sm-bold, .body-xs-bold { font-weight: 700; }

/* ==========================================================================
   Buttons — Primary / Secondary, four sizes, icon-only, disabled.
   Redefines .btn-primary (used across the header, hero, and CTA sections)
   and adds the new .btn-secondary to match the Figma "Secondary" variant.
   Combine with a size class: .btn-primary.btn-lg, .btn-secondary.btn-sm, etc.
   Omitting a size class defaults to Medium.
   ========================================================================== */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 32px;
    font-family: var(--ds-font-body);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    padding: 16px 48px;
    font-size: var(--ds-btn-md-fs);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    background: var(--Main-Color-Main-Color, #31aaec);
    color: var(--ds-color-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--ds-color-primary-hover);
    color: var(--ds-color-white);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
    background-color: var(--ds-color-disabled-bg);
    color: var(--ds-color-disabled-text);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    background-color: var(--ds-color-white);
    color: var(--ds-color-primary);
    border-color: var(--ds-color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--ds-color-primary);
    color: var(--ds-color-white);
}

.btn-secondary:disabled,
.btn-secondary.is-disabled {
    background-color: var(--ds-color-white);
    color: var(--ds-color-disabled-text);
    border-color: var(--ds-color-disabled-border);
    cursor: not-allowed;
    pointer-events: none;
}

/* Ghost (dark) — translucent outline button used on photo/gradient
   backgrounds, e.g. the hero's "See What We've Built". */
.btn-ghost-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 32px;
    font-family: var(--ds-font-body);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    padding: 16px 48px;
    border: 1px solid var(--Main-Color-White, #fff);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    color: var(--ds-color-white);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost-dark:hover,
.btn-ghost-dark:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ds-color-white);
}

.btn-ghost-dark:disabled,
.btn-ghost-dark.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes — combine with .btn-primary or .btn-secondary */
.btn-lg { height: var(--ds-btn-lg-h); padding: 0 var(--ds-btn-lg-px); font-size: var(--ds-btn-lg-fs); }
.btn-md { height: var(--ds-btn-md-h); padding: 0 var(--ds-btn-md-px); font-size: var(--ds-btn-md-fs); }
.btn-sm { height: var(--ds-btn-sm-h); padding: 0 var(--ds-btn-sm-px); font-size: var(--ds-btn-sm-fs); }
.btn-xs { height: var(--ds-btn-xs-h); padding: 0 var(--ds-btn-xs-px); font-size: var(--ds-btn-xs-fs); }

/* Icon-only (circular) — e.g. <a class="btn-primary btn-icon-only btn-lg"> */
.btn-icon-only {
    padding: 0;
    aspect-ratio: 1 / 1;
    width: var(--ds-btn-md-h);
}

.btn-icon-only.btn-lg { width: var(--ds-btn-lg-h); }
.btn-icon-only.btn-md { width: var(--ds-btn-md-h); }
.btn-icon-only.btn-sm { width: var(--ds-btn-sm-h); }
.btn-icon-only.btn-xs { width: var(--ds-btn-xs-h); }

.btn-icon-only svg {
    width: 1.1em;
    height: 1.1em;
}

.btn-primary svg,
.btn-secondary svg,
.btn-ghost-dark svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}