/* =====================================================================
   Cloudatmo Design System — colors + type tokens
   "Cloud IT services for growing businesses."

   Type hierarchy (per official brand spec, fonts/cloudatmo-brand-spec.md):
     1. Display    — All Round Gothic Bold (LOWERCASE, mirrors wordmark)
     2. Heading    — DIN Sans Bold / Regular  → substituted with Barlow
     3. Body       — Open Sans (with Roboto as alternate)

   Color palette is the official v2 (Sept 2022) palette.
   ===================================================================== */

/* ----- 1. Display — All Round Gothic Bold (local brand font) ----------- */
@font-face {
  font-family: "All Round Gothic";
  src: url("../fonts/AllRoundGothic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- 2. Heading — DIN Bold (local brand font) ------------------------ */
@font-face {
  font-family: "DIN";
  src: url("../fonts/DIN-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- 3. Body — Open Sans variable (local brand font) ----------------- */
/* Latin-subset woff2 (48 KB) from Google Fonts in place of the 530 KB full TTF the
   prototype shipped — same variable axis, same weights. */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Variable-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* ----- 4. Mono — Roboto Mono (local) ----------------------------------- */
/* Latin-subset woff2 (13 KB) from Google Fonts. The prototype shipped the 2.45 MB Nerd
   Fonts build; none of its icon glyphs were ever used. */
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/RobotoMono-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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 {
  /* ===================================================================
     COLOUR PALETTE — official v2 (Sept 2022)
     =================================================================== */

  /* --- Primary --- */
  --color-cyan:         #00AEEF;   /* dominant brand color, CTAs, `cloud` wordmark */
  --color-mulberry:     #391C46;   /* dark base — body text, headings, `atmo` wordmark */

  /* --- Secondary --- */
  --color-ultramarine:  #1A1540;   /* deep dark accent / alt dark surface */

  /* --- Pillar (accents only; not large fills) --- */
  --color-red:          #ED1C24;
  --color-green:        #8DC63F;
  --color-purple:       #92278F;
  --color-gold:         #F7941D;

  /* --- Semantic aliases (preferred for components) --- */
  --color-brand:        var(--color-cyan);
  --color-ink:          var(--color-mulberry);
  --color-surface:      #FFFFFF;
  --color-surface-dk:   var(--color-mulberry);
  --color-surface-deep: var(--color-ultramarine);

  /* --- Product-track aliases (the four service tracks) --- */
  --product-analyse:    var(--color-red);
  --product-train:      var(--color-green);
  --product-migrate:    var(--color-purple);
  --product-optimise:   var(--color-gold);

  /* --- Neutrals (warm, derived from mulberry) --- */
  --neutral-50:   #F7F5FA;
  --neutral-100:  #EEEAF2;
  --neutral-200:  #DCD4E3;
  --neutral-300:  #B9ADC5;
  --neutral-400:  #8E7E9E;
  --neutral-500:  #6A5A7B;
  --neutral-600:  #4D3F5C;
  --neutral-700:  #2F2438;
  --neutral-800:  #1F1727;
  --neutral-900:  #100B16;

  /* --- Surfaces & text (semantic) --- */
  --bg:            var(--color-surface);
  --bg-elevated:   #FAFAFC;
  --bg-soft:       #F2EDF8;
  --bg-space:      var(--color-ultramarine);
  --bg-brand:      var(--color-cyan);

  --fg1:           var(--color-mulberry);  /* primary text on light */
  --fg2:           var(--neutral-600);     /* secondary text */
  --fg3:           var(--neutral-500);     /* tertiary / muted */
  --fg-on-dark:    var(--color-surface);
  --fg-on-brand:   var(--color-surface);
  --fg-link:       var(--color-cyan);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-dark:   rgba(255,255,255,0.12);

  --success:       var(--color-green);
  --warning:       var(--color-gold);
  --danger:        var(--color-red);
  --info:          var(--color-cyan);

  /* ===================================================================
     TYPOGRAPHY
     =================================================================== */
  --font-display:  "All Round Gothic", "Baloo 2", system-ui, sans-serif;
  --font-heading:  "DIN", "DIN Next", "Barlow", system-ui, sans-serif;
  --font-body:     "Open Sans", "Roboto", system-ui, -apple-system, sans-serif;
  --font-mono:     "Roboto Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* legacy aliases (kept so existing previews & UI kit don't break) */
  --font-sans:     var(--font-body);

  /* sizes (modular: ~1.18 ratio off 16px body) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* line-heights */
  --lh-tight:    1.02;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  /* letter-spacing */
  --tracking-tight:     -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-uppercase: 0.12em;

  /* ===================================================================
     SPACING (4px base)
     =================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===================================================================
     RADII — chunky, cloud-soft. Pill for buttons.
     =================================================================== */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ===================================================================
     SHADOWS — soft, slightly mulberry-tinted
     =================================================================== */
  --shadow-sm:   0 1px 2px rgba(57, 28, 70, 0.08);
  --shadow-md:   0 6px 18px rgba(57, 28, 70, 0.10);
  --shadow-lg:   0 20px 40px rgba(57, 28, 70, 0.18);
  --shadow-cta:  0 8px 20px rgba(0, 174, 239, 0.35);
  --shadow-card-glow: 0 12px 32px rgba(146, 39, 143, 0.25);

  /* motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* gradients */
  --grad-space:     radial-gradient(120% 80% at 50% 0%, #2E1F60 0%, #1A1540 55%, #0E0926 100%);
  --grad-aurora:    linear-gradient(135deg, #00AEEF 0%, #92278F 100%);
  --grad-card-soft: linear-gradient(160deg, #F7F5FA 0%, #EEEAF2 100%);
  --grad-cta:       linear-gradient(180deg, #FFB13A 0%, #F7941D 100%);

  /* legacy color aliases — kept so existing files don't break */
  --atmo-cyan:        var(--color-cyan);
  --atmo-cyan-deep:   #1C75BC;
  --atmo-aubergine:   var(--color-mulberry);
  --atmo-midnight:    var(--color-ultramarine);
  --atmo-ink:         var(--color-mulberry);
  --atmo-white:       #FFFFFF;
  --analyse-red:      var(--color-red);
  --analyse-red-soft: #F15A22;
  --optimise-orange:  var(--color-gold);
  --train-green:      var(--color-green);
  --migrate-mulberry: var(--color-purple);
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
html, body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* H1 — All Round Gothic Bold, LOWERCASE, mirroring the wordmark */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-transform: lowercase;
}

/* H2 — All Round Gothic Bold, still lowercase */
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-transform: lowercase;
}

/* H3 — DIN/Barlow Bold, sentence case */
.h3, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

/* H4 — DIN/Barlow Regular, sentence case */
.h4, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-cyan);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.small, small {
  font-size: var(--fs-14);
  color: var(--fg3);
}

.caption {
  font-family: var(--font-heading);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--fg3);
  font-weight: var(--fw-semi);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--fg1);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.75; }

/* Dark surfaces — flip text colors */
.on-dark { color: var(--fg-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .eyebrow,
.on-dark p, .on-dark .lede { color: inherit; }
.on-dark .lede { color: rgba(255,255,255,0.78); }
.on-dark p    { color: rgba(255,255,255,0.78); }