/* =========================================================================
   ATOM Group — Colors & Type
   A single shared design language across the 5 business lines.
   Each sub-brand inherits the system; only the accent color changes.
   ========================================================================= */

/* ---------- 1. FONTS ----------
   Primary:  Montserrat (geometric sans, near-perfect match for the wordmark)
   UI body:  Inter (clean neutral sans for product UI / long-form copy)
   Both are Google Fonts; substituted while we wait for official ATOM fonts.   */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ====== TYPE FAMILIES ====== */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;     /* big uppercase headlines, logos, posters */
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;          /* product UI, paragraphs */
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ====== TYPE SCALE (clamp-based, fluid) ====== */
  --fs-display-1: clamp(3rem,    5vw + 1rem, 5.5rem);   /* poster hero    */
  --fs-display-2: clamp(2.25rem, 3vw + 1rem, 3.75rem);  /* slide title    */
  --fs-h1:        clamp(2rem,    2vw + 1rem, 3rem);
  --fs-h2:        1.875rem;   /* 30 */
  --fs-h3:        1.5rem;     /* 24 */
  --fs-h4:        1.25rem;    /* 20 */
  --fs-body-lg:   1.125rem;   /* 18 */
  --fs-body:      1rem;       /* 16 */
  --fs-body-sm:   0.875rem;   /* 14 */
  --fs-caption:   0.75rem;    /* 12 */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.18em;   /* uppercase labels, footers, captions */
  --tracking-button:   0.04em;

  /* ====== WEIGHT TOKENS ====== */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* ====== NEUTRALS — the spine of the system ====== */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F7F8;
  --neutral-100:  #EFEFF1;
  --neutral-200:  #E2E2E5;
  --neutral-300:  #C9C9CE;
  --neutral-400:  #9A9AA1;
  --neutral-500:  #6B6B73;
  --neutral-600:  #4D4D54;   /* poster background grey */
  --neutral-700:  #3A3A40;   /* card "title capsule" grey */
  --neutral-800:  #25252A;
  --neutral-900:  #15151A;   /* near-black, used for brand wordmark */
  --black:        #000000;

  /* ====== BRAND ACCENTS — one per business line ====== */
  /* ATOM Group is monochrome — uses pure black + neutral greys.
     The 5 sub-brands each carry one signature color drawn from their logo. */

  --atom-group-ink:    #15151A;
  --atom-group-accent: #2E2E33;   /* charcoal accent for dividers, etc */

  /* ATOM Center — trust, certification, employability */
  --atom-center:        #1A3DA0;       /* deep institutional blue, taken from poster headlines */
  --atom-center-hover:  #16358A;
  --atom-center-soft:   #E8EDF8;

  /* ATOM Code — software / digital transformation */
  --atom-code:          #6848A8;       /* signature purple from logo */
  --atom-code-hover:    #5A3D94;
  --atom-code-soft:     #EFEAF8;

  /* ATOM Campus — bootcamps, energy, talent factory */
  --atom-campus:        #F87808;       /* signature orange from logo */
  --atom-campus-hover:  #DC6A04;
  --atom-campus-soft:   #FDEBD9;

  /* ATOM Leaders — gravitas, executive, confidential */
  --atom-leaders:       #980818;       /* deep burgundy from logo */
  --atom-leaders-hover: #7E0612;
  --atom-leaders-soft:  #F6E1E4;

  /* ATOM Pioneer — long-term, durable value, ventures */
  --atom-pioneer:       #284838;       /* forest green from logo */
  --atom-pioneer-hover: #1F3A2C;
  --atom-pioneer-soft:  #DDE7E1;

  /* ====== SEMANTIC FOREGROUND / BACKGROUND ====== */
  --fg-1:        var(--neutral-900);   /* primary text */
  --fg-2:        var(--neutral-700);   /* secondary text */
  --fg-3:        var(--neutral-500);   /* tertiary / metadata */
  --fg-on-dark:  var(--neutral-0);
  --fg-on-accent:var(--neutral-0);
  --fg-disabled: var(--neutral-400);

  --bg-1:       var(--neutral-0);      /* page */
  --bg-2:       var(--neutral-50);     /* subtle surface */
  --bg-3:       var(--neutral-100);    /* section break */
  --bg-dark-1:  var(--neutral-900);    /* dark page */
  --bg-dark-2:  var(--neutral-800);    /* dark surface */
  --bg-poster:  var(--neutral-600);    /* the signature ATOM poster grey */

  --border-1:   var(--neutral-200);
  --border-2:   var(--neutral-300);
  --border-strong: var(--neutral-700);

  /* ====== STATUS ====== */
  --success:  #1F7A3A;
  --warning:  #B86E00;
  --danger:   #B0091B;
  --info:     var(--atom-center);

  /* ====== RADII ====== */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;   /* default for cards */
  --radius-xl:  24px;   /* large feature cards / capsules */
  --radius-2xl: 32px;
  --radius-pill: 999px;

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

  /* ====== ELEVATION / SHADOWS ======
     ATOM uses soft, low-contrast shadows. Posters drop a subtle shadow under
     stacked cards so they look "layered onto" the grey background.        */
  --shadow-xs: 0 1px 2px rgba(20, 20, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 20, 26, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 20, 26, 0.10);
  --shadow-lg: 0 18px 40px rgba(20, 20, 26, 0.14);
  --shadow-xl: 0 30px 60px rgba(20, 20, 26, 0.18);

  /* ====== MOTION ====== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply colors_and_type.css globally and these "just work".
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-display);
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-extra); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);  line-height: var(--lh-snug);  }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold);  line-height: var(--lh-snug);  }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi);  line-height: var(--lh-snug);  }

.display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

.caption { font-size: var(--fs-caption); color: var(--fg-3); }

code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; }