/* ============================================================
   ARCTIC AIR TECH INNOVATIONS - design tokens
   Concept mock built by Prizmek.

   The whole palette is one cool family (glacial navy through
   ice blue). Ember is the only colour outside that family and
   it means exactly one thing: act here.
   ============================================================ */

:root {
  color-scheme: dark light;

  /* ---- Type ------------------------------------------------ */
  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid display scale. Clamped so a 6-word headline never
     eats the fold on a laptop. */
  --t-display: clamp(2.6rem, 1.4rem + 4.4vw, 5.1rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem);
  --t-lead: clamp(1.03rem, 0.97rem + 0.32vw, 1.19rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;

  --lh-display: 0.98;
  --lh-heading: 1.08;
  --lh-body: 1.65;

  --track-display: -0.028em;
  --track-label: 0.16em;

  /* ---- Space ----------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --measure: 62ch;
  --max: 1320px;

  /* ---- Shape ------------------------------------------------
     One radius system: panels 14px, controls pill, inputs 10px.
     Nothing else gets a corner. */
  --r-panel: 14px;
  --r-input: 10px;
  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 620ms;

  --z-nav: 100;
  --z-menu: 110;
  --z-grain: 140;

  /* ---- Thermal ramp -----------------------------------------
     The six stops above, expressed once as a bar and once as a
     280deg sweep, so a divider rule and the dial always agree.
     60F sits at 0deg, 90F at 280deg: 6 degrees per 56deg of arc. */
  --thermal-bar: linear-gradient(90deg,
    var(--t-60) 0%, var(--t-66) 20%, var(--t-72) 40%,
    var(--t-78) 60%, var(--t-84) 80%, var(--t-90) 100%);

  --thermal-sweep: conic-gradient(from 0deg,
    var(--t-60) 0deg, var(--t-66) 56deg, var(--t-72) 112deg,
    var(--t-78) 168deg, var(--t-84) 224deg, var(--t-90) 280deg,
    transparent 280.5deg);

  /* Ring band, reused by the track and the active arc. */
  --dial-donut: radial-gradient(closest-side,
    transparent 0 76%, #000 77% 96%, transparent 96.5%);
}

/* ============================================================
   ARCTIC NIGHT (default)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  --ground: #06121d;
  --ground-2: #0a1b29;
  --surface: #0e2434;
  --surface-2: #143045;
  --surface-glass: rgba(18, 44, 63, 0.58);

  --fg: #eaf4fb;
  --fg-2: #a3bdd1;
  --fg-3: #6f8ca3;

  --line: rgba(140, 199, 235, 0.15);
  --line-strong: rgba(140, 199, 235, 0.3);

  --ice: #56b8e8;
  --ice-deep: #2a8fc7;
  --ice-wash: rgba(86, 184, 232, 0.09);

  --ember: #f5821f;
  --on-ember: #07141f;
  --ember-wash: rgba(245, 130, 31, 0.13);

  /* Thermal scale. See tokens below for how this is used. */
  --t-60: #1e6fd9;
  --t-66: #38bdf8;
  --t-72: #7fd8e8;
  --t-78: #fbbf24;
  --t-84: #f97316;
  --t-90: #ef4444;
  --dial-track-opacity: 0.28;

  --shadow-panel: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 34px 80px -32px rgba(0, 0, 0, 0.9);
  --photo-filter: saturate(0.86) contrast(1.06) brightness(0.84);
  --scrim: linear-gradient(180deg, rgba(6, 18, 29, 0) 0%, rgba(6, 18, 29, 0.72) 62%, rgba(6, 18, 29, 0.95) 100%);
}

/* ============================================================
   DAYLIGHT ICE
   Same structure, same accent discipline, darker ink so every
   value clears WCAG AA on the paler ground.
   ============================================================ */
:root[data-theme="light"] {
  --ground: #f2f7fb;
  --ground-2: #e7eff6;
  --surface: #ffffff;
  --surface-2: #f4f8fc;
  --surface-glass: rgba(255, 255, 255, 0.72);

  --fg: #0a1b29;
  --fg-2: #3d5568;
  --fg-3: #5e7387;

  --line: rgba(10, 27, 41, 0.12);
  --line-strong: rgba(10, 27, 41, 0.24);

  --ice: #14638f;
  --ice-deep: #0d4a6d;
  --ice-wash: rgba(20, 99, 143, 0.07);

  --ember: #b4530a;
  --on-ember: #ffffff;
  --ember-wash: rgba(180, 83, 10, 0.1);

  /* Darkened a step so the scale still reads against a pale ground. */
  --t-60: #175bb4;
  --t-66: #1786c4;
  --t-72: #2f9fb4;
  --t-78: #c98908;
  --t-84: #d35f0c;
  --t-90: #c62f2f;
  --dial-track-opacity: 0.5;

  --shadow-panel: 0 20px 46px -26px rgba(10, 27, 41, 0.3);
  --shadow-lift: 0 30px 70px -30px rgba(10, 27, 41, 0.34);
  --photo-filter: saturate(1) contrast(1.02) brightness(1);
  --scrim: linear-gradient(180deg, rgba(242, 247, 251, 0) 0%, rgba(242, 247, 251, 0.7) 62%, rgba(242, 247, 251, 0.96) 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ground: #f2f7fb;
    --ground-2: #e7eff6;
    --surface: #ffffff;
    --surface-2: #f4f8fc;
    --surface-glass: rgba(255, 255, 255, 0.72);

    --fg: #0a1b29;
    --fg-2: #3d5568;
    --fg-3: #5e7387;

    --line: rgba(10, 27, 41, 0.12);
    --line-strong: rgba(10, 27, 41, 0.24);

    --ice: #14638f;
    --ice-deep: #0d4a6d;
    --ice-wash: rgba(20, 99, 143, 0.07);

    --ember: #b4530a;
    --on-ember: #ffffff;
    --ember-wash: rgba(180, 83, 10, 0.1);

    --t-60: #175bb4;
    --t-66: #1786c4;
    --t-72: #2f9fb4;
    --t-78: #c98908;
    --t-84: #d35f0c;
    --t-90: #c62f2f;
    --dial-track-opacity: 0.5;

    --shadow-panel: 0 20px 46px -26px rgba(10, 27, 41, 0.3);
    --shadow-lift: 0 30px 70px -30px rgba(10, 27, 41, 0.34);
    --photo-filter: saturate(1) contrast(1.02) brightness(1);
    --scrim: linear-gradient(180deg, rgba(242, 247, 251, 0) 0%, rgba(242, 247, 251, 0.7) 62%, rgba(242, 247, 251, 0.96) 100%);
  }
}