/* ==========================================================================
   Frontier Edge — design tokens
   The single source for every value the site's design uses. Components and
   pages reference these; change a value here and it changes everywhere.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- Typography ---------- */
  --font-sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;

  /* Headings (desktop and tablet; phone sizes below) */
  --h1-size: 52px;   --h1-leading: 1.06; --h1-tracking: -0.02em;
  --h2-size: 48px;   --h2-leading: 1.1;  --h2-tracking: -0.02em;
  --h3-size: 26px;   --h3-leading: 1.2;  --h3-tracking: -0.01em;
  /* Lead (the paragraph under an H1) */
  --lead-size: 20px; --lead-leading: 1.6;
  /* Body / description text */
  --body-size: 16px; --body-leading: 1.6;
  /* Landing page base text */
  --base-size: 17px; --base-leading: 1.55;
  /* Small text (form labels, legal) */
  --small-size: 14px;
  /* Buttons */
  --button-size: 14px; --button-tracking: 0.01em;
  /* Wordmark in the nav */
  --wordmark-size: 22px; --wordmark-tracking: -0.01em;
  /* Thank-you heading on the demo page */
  --h2-small-size: 36px;

  /* ---------- Colour: neutrals ---------- */
  --color-bg: #060607;          /* page background, near black */
  --color-fg: #FFFFFF;          /* primary text */
  --color-fg-2: #C9CACD;        /* secondary text: lead, body copy, form labels */
  --color-muted: #8C8D90;       /* tertiary text: optional hints, legal */
  --color-line: #242528;        /* dividers */

  /* Surfaces (darkest to lightest) */
  --surface-window: #0A0A0C;    /* black box in the green section */
  --surface-form: #0B0B0D;      /* demo form card */
  --surface-control: #121315;   /* inputs, ghost button */
  --surface-control-focus: #15161A;
  --surface-control-hover: #1A1B1E;

  /* Borders */
  --border-window: #26272B;
  --border-card: #1E1F23;
  --border-card-on-green: #1A1B1E;
  --border-control: #2A2B2F;

  /* ---------- Colour: accents ---------- */
  --color-required: #F28B5C;    /* required asterisk, error text */
  --color-invalid: #E2581A;     /* invalid field border */
  --color-checkbox: #FFB347;    /* ticked checkbox */
  --color-focus: #9ED48C;       /* focused field border */
  --color-field-green: #B5D4A7; /* light green grid field behind the black box */
  --color-grid-line: rgba(255, 255, 255, .45);

  /* Orange ramp: button mesh and the service icons, warm yellow to deep orange */
  --orange-50:  #FFE680;
  --orange-100: #FFB347;
  --orange-300: #FF7A3C;
  --orange-400: #FF6E2C;
  --orange-500: #EE6430;        /* button base */
  --orange-600: #F05A26;
  --orange-800: #D63F1C;
  --orange-glow-yellow: rgba(255, 205, 80, .95);
  --orange-glow-green: rgba(110, 175, 95, .8);
  --button-border: rgba(255, 170, 110, .55);
  --button-text-shadow: 0 1px 2px rgba(120, 40, 0, .25);

  /* Hero corner mesh (also the page-transition palette): blues, a mauve core, deep navy and green */
  --hero-base: #233A86;
  --hero-1: #8FA0E6;
  --hero-2: #B47E9B;
  --hero-3: #4A66C4;
  --hero-4: #6F86DA;
  --hero-5: #0E3A2C;
  --hero-6: #1B2A66;
  --hero-7: #A9B6EE;

  /* Green mesh: the frame around the black box, and the demo form panel */
  --green-base: #2F6D4D;
  --green-1: #336E34;
  --green-2: #2C6A3A;
  --green-3: #3D827B;
  --green-4: #387D72;
  --green-5: #508984;
  --green-6: #46847B;
  --green-yellow: rgba(232, 214, 90, .95);
  --green-yellow-soft: rgba(222, 206, 98, .6);

  /* Spotlight mesh: footer wordmark and service dividers */
  --spot-base: #5A74E0;
  --spot-1: #3FA27E;
  --spot-2: #6E8CFF;
  --spot-3: #FF8FC4;
  --spot-4: #9AB0FF;
  --spot-5: #B9C6FF;

  /* ---------- Spacing & layout ---------- */
  --max-width: 1600px;          /* content column; gutters sit outside it */
  --gutter: 48px;               /* page side margin (24px on phones) */
  --nav-pad: 20px;              /* nav bar top/bottom padding; nav row is 76px tall */
  --section-pad: 112px;         /* capabilities section top/bottom */
  --closing-pad: 220px;         /* closing section top/bottom */
  --hero-pad-top: 96px;
  --hero-pad-bottom: 72px;
  --intro-indent: 96px;         /* demo page intro text, in from the logo */
  --card-pad: 48px;             /* demo form card padding */
  --panel-pad: 40px;            /* green frame around the demo form */
  --window-pad: 72px;           /* black box padding */
  --frame: 88px;                /* green mesh frame around the black box */
  --field-gap: 20px;            /* between form fields */
  --label-gap: 8px;             /* label to input */

  /* ---------- Components ---------- */
  --radius: 0;                  /* everything is square-cornered */
  --button-height: 36px;
  --button-pad-x: 16px;
  --input-pad: 12px 14px;
  --checkbox-size: 18px;

  /* ---------- Motion ---------- */
  --ease-overshoot: cubic-bezier(.34, 1.3, .64, 1);         /* mesh swirls */
  --ease-overshoot-button: cubic-bezier(.34, 1.36, .64, 1); /* button mesh swing */
  --mesh-swirl-duration: 1.4s;
  --button-swing-duration: 1.1s;
}

/* Phones */
@media (max-width: 760px) {
  :root {
    --gutter: 24px;
    --h1-size: 48px;
    --h2-size: 36px; --h2-leading: 1.08;
    --h3-size: 20px;
    --lead-size: 18px;
    --section-pad: 56px;
    --closing-pad: 110px;
    --hero-pad-top: 56px;
    --hero-pad-bottom: 48px;
    --card-pad: 24px;
    --panel-pad: 16px;
  }
}