/* =========================================================================
   ATLANTIS STRENGTH — Colors & Type
   Foundation tokens. Import this file into any artifact built against the
   Atlantis design system.

   Philosophy
   ----------
   Atlantis is structured by black and white. Red punctuates. Type is
   condensed, industrial, editorial. Spacing is generous. Borders are crisp.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----------------------------------------------------------------------
     CORE PALETTE — the only three colors that carry brand meaning.
     ---------------------------------------------------------------------- */
  --atl-red:        #C22032;   /* Atlantis Red. Accent only. ≤20% of any composition. */
  --atl-black:      #000000;
  --atl-white:      #FFFFFF;

  /* Tonal red (pressed/hover only — never a primary surface). */
  --atl-red-deep:   #951625;   /* hover/press on red surfaces */
  --atl-red-soft:   #E84658;   /* small interactive emphasis */

  /* ----------------------------------------------------------------------
     NEUTRAL SCALE — engineered grays. The structural workhorse.
     Use generously. These carry the architectural feel.
     ---------------------------------------------------------------------- */
  --atl-ink-1000:   #000000;   /* true black — primary surface for dark mode */
  --atl-ink-900:    #0B0B0C;   /* near-black panels */
  --atl-ink-800:    #161618;
  --atl-ink-700:    #232327;
  --atl-ink-600:    #36363B;
  --atl-ink-500:    #55555B;
  --atl-ink-400:    #7A7A80;
  --atl-ink-300:    #A8A8AD;
  --atl-ink-200:    #D2D2D5;
  --atl-ink-150:    #E4E4E6;
  --atl-ink-100:    #EFEFF1;
  --atl-ink-50:     #F6F6F7;   /* page wash, never a card surface alone */
  --atl-ink-0:      #FFFFFF;

  /* ----------------------------------------------------------------------
     SEMANTIC TOKENS — light mode (default).
     ---------------------------------------------------------------------- */
  --bg:             var(--atl-ink-0);          /* page */
  --bg-alt:         var(--atl-ink-50);         /* subtle section break */
  --bg-inverse:     var(--atl-ink-1000);       /* black hero / dark section */
  --surface:        var(--atl-ink-0);          /* card/panel */
  --surface-2:      var(--atl-ink-50);         /* nested surface */

  --fg:             var(--atl-ink-1000);       /* primary text */
  --fg-2:           var(--atl-ink-700);        /* secondary text */
  --fg-3:           var(--atl-ink-500);        /* tertiary / metadata */
  --fg-4:           var(--atl-ink-400);        /* quiet captions */
  --fg-on-inverse:  var(--atl-ink-0);          /* text on black */
  --fg-2-on-inverse:var(--atl-ink-300);

  --rule:           var(--atl-ink-1000);       /* heavy editorial rule */
  --rule-2:         var(--atl-ink-200);        /* hairline divider */
  --rule-3:         var(--atl-ink-150);
  --rule-on-inverse:var(--atl-ink-700);

  --accent:         var(--atl-red);
  --accent-fg:      var(--atl-ink-0);          /* text on red */
  --accent-deep:    var(--atl-red-deep);

  /* Status — used very sparingly. Atlantis is not a SaaS dashboard. */
  --ok:             #1F7A3A;
  --warn:           #B26A00;
  --err:            var(--atl-red);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY FAMILIES
     ----------------------------------------------------------------------
     NOTE: The Atlantis wordmark itself is a custom display cut and is not
     reproduced as a webfont. For UI/long-form we ship three families:

       --font-display : Antonio   — condensed industrial display (substitute,
                                    flagged in README — wordmark is bespoke)
       --font-sans    : Archivo   — engineered grotesque for body/UI
       --font-mono    : JetBrains Mono — specs, model numbers, dimensions

     Always lock display headings to UPPERCASE with tight tracking.
     ---------------------------------------------------------------------- */
  --font-display: 'Antonio', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale (px, fluid recommended at section level, not token level) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;
  --fs-128: 128px;

  /* Tracking — display always tightened, eyebrows always opened up */
  --track-display:    -0.01em;
  --track-tight:      -0.015em;
  --track-normal:      0;
  --track-wide:        0.06em;
  --track-eyebrow:     0.18em;

  /* Line heights */
  --lh-display:  0.92;
  --lh-heading:  1.04;
  --lh-body:     1.55;
  --lh-tight:    1.25;

  /* ----------------------------------------------------------------------
     SPACING — 4pt base, generous at the upper end.
     Atlantis layouts breathe; do not pack content.
     ---------------------------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;
  --sp-40:  160px;

  /* Page gutters at common breakpoints */
  --gutter-mobile:  24px;
  --gutter-tablet:  48px;
  --gutter-desk:    72px;
  --gutter-wide:    120px;

  /* ----------------------------------------------------------------------
     RADII — Atlantis is architectural. Corners stay tight.
     Default is 0. Cards get 2px. Pills are reserved for tags only.
     ---------------------------------------------------------------------- */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;     /* the upper limit for product/marketing surfaces */
  --r-pill: 999px;  /* tag chips only */

  /* ----------------------------------------------------------------------
     BORDERS — sharp, weighted. The 1px hairline is workhorse;
     2px is editorial; 4px is a section underscore.
     ---------------------------------------------------------------------- */
  --bw-hair:  1px;
  --bw-rule:  2px;
  --bw-bold:  4px;
  --bw-mark:  8px;   /* red accent bar / section flag */

  /* ----------------------------------------------------------------------
     SHADOWS — used sparingly. Real product photography carries depth.
     Default UI uses borders, not shadows.
     ---------------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(0,0,0,0.06);
  --shadow-2: 0 8px 24px -12px rgba(0,0,0,0.18);
  --shadow-3: 0 24px 60px -24px rgba(0,0,0,0.30);

  /* ----------------------------------------------------------------------
     MOTION — restrained. No bounce. No spring. Functional easing.
     ---------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:   120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* Z indexes */
  --z-nav: 50;
  --z-overlay: 90;
  --z-modal: 100;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or the matching CSS) anywhere you need a heading or
   body. Keep display headings UPPERCASE.
   ========================================================================= */

.atl-eyebrow,
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size:calc(var(--atl-fs,1) * (var(--fs-12)));
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.atl-eyebrow::before,
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}
.atl-eyebrow.no-mark::before,
.eyebrow.no-mark::before { display: none; }

.atl-display,
h1.atl-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:calc(var(--atl-fs,1) * (clamp(48px, 7vw, var(--fs-128))));
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.atl-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size:calc(var(--atl-fs,1) * (clamp(40px, 5.4vw, var(--fs-96))));
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

.atl-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size:calc(var(--atl-fs,1) * (clamp(32px, 3.6vw, var(--fs-56))));
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.atl-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size:calc(var(--atl-fs,1) * (var(--fs-32)));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.atl-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size:calc(var(--atl-fs,1) * (var(--fs-20)));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-normal);
  text-transform: uppercase;
  margin: 0;
}

.atl-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:calc(var(--atl-fs,1) * (var(--fs-20)));
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.atl-body,
p.atl-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:calc(var(--atl-fs,1) * (var(--fs-16)));
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0;
}

.atl-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size:calc(var(--atl-fs,1) * (var(--fs-14)));
  line-height: 1.5;
  color: var(--fg-2);
}

.atl-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size:calc(var(--atl-fs,1) * (var(--fs-12)));
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.atl-spec {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size:calc(var(--atl-fs,1) * (var(--fs-13)));
  color: var(--fg-2);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Quote / pull — used in editorial sections only */
.atl-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size:calc(var(--atl-fs,1) * (clamp(24px, 2.6vw, var(--fs-40))));
  line-height: 1.18;
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-transform: none;
  max-width: 22ch;
}

/* =========================================================================
   UTILITY: red-mark accent rule. Drop this above a heading for an
   editorial flag.
   ========================================================================= */
.atl-mark {
  width: 56px;
  height: var(--bw-mark);
  background: var(--accent);
  display: block;
  margin-bottom: var(--sp-5);
}

/* =========================================================================
   DARK MODE — opt-in via [data-theme="dark"] on a parent.
   Atlantis dark sections invert structure: black ground, white type, red
   stays the same. Used for hero sections, video frames, photo backdrops.
   ========================================================================= */
[data-theme="dark"] {
  --bg:             var(--atl-ink-1000);
  --bg-alt:         var(--atl-ink-900);
  --bg-inverse:     var(--atl-ink-0);
  --surface:        var(--atl-ink-900);
  --surface-2:      var(--atl-ink-800);
  --fg:             var(--atl-ink-0);
  --fg-2:           var(--atl-ink-200);
  --fg-3:           var(--atl-ink-300);
  --fg-4:           var(--atl-ink-400);
  --rule:           var(--atl-ink-0);
  --rule-2:         var(--atl-ink-700);
  --rule-3:         var(--atl-ink-800);
  --accent-fg:      var(--atl-ink-0);
}