/* =========================================================================
   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.
   ========================================================================= */

/* -------------------------------------------------------------------------
   LES POLICES SONT SERVIES PAR CE SERVEUR, ET C'EST UNE REGLE, PAS UN GOUT.

   Il y avait ici un @import vers fonts.googleapis.com. 846 des 848 pages
   servies chargent cette feuille : a chaque ouverture de page, le navigateur
   du visiteur demandait donc ses polices a Google, ce qui transmettait a
   Google LLC son adresse IP, son User-Agent et l'adresse de la page lue,
   avant toute action de sa part et sans le moindre consentement. Un
   destinataire non declare (RGPD art. 13(1)(e)) et un transfert hors UE
   (art. 44) sur la quasi-totalite du site, pour trois familles de caracteres.

   Un @import ne se voit dans AUCUNE page : c'est la facon la plus discrete
   de faire charger un tiers, et c'est pour cela qu'il avait survecu a une
   premiere recherche menee sur les seuls fichiers HTML.

   Les trois familles sont sous licence libre (OFL) et vivent maintenant dans
   assets/fonts/google/, en woff2, sous-ensembles latin et latin-ext, en
   fontes variables (une seule ressource couvre toutes les graisses).

   SI VOUS AJOUTEZ UNE FAMILLE : rapatriez-la ici aussi. La sonde
   « Ressources chargees chez un tiers » de /administration/conformite
   reconnait @import, <link>, <script>, @font-face et <img>, et elle criera.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/google/antonio-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/google/antonio-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/google/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/google/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/google/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/google/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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);
}