/* ============================================================================
   Internology — brand tokens
   ----------------------------------------------------------------------------
   THE source of truth for colour, type and spacing in the Internship Program
   Builder. docs/BRAND_GUIDE.md documents this file; it does not replace it.
   Import this before any other stylesheet and reference the tokens — never
   hardcode a hex value in a component.

   Palette and typography were measured from https://www.internology.org
   (2026-09-02), not invented. The two brand colours are the two colours in
   the logo, sampled from the asset itself: teal 47.6% of pixels, navy 35.0%.

   THE ONE RULE THAT MATTERS
   -------------------------
   Navy is the TEXT and UI colour. Teal is the GRAPHIC colour.

   Teal (#0A9396) is 3.53:1 on paper — it clears the 3:1 bar for UI components
   and large text, and fails the 4.5:1 bar for body text. Internology's own site
   already works this way: navy buttons, navy nav, teal as full-bleed section
   bands and the logo lens. Never set body copy in --brand-teal.
   ========================================================================= */

/* --- Typefaces -------------------------------------------------------------
   Manrope (headings) and Nunito Sans (body/UI) are the faces internology.org
   actually serves. Load exactly these two:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap">
   -------------------------------------------------------------------------- */

:root {
  /* ---- Brand constants (identical in every theme) ---- */
  --brand-navy:        #1A3262;  /* logo navy — text, buttons, links, focus  */
  --brand-teal:        #0A9396;  /* logo teal — bands, fills, icons, borders */

  /* ---- Navy ramp ---- */
  --navy-900: #111F3E;
  --navy-800: #152951;
  --navy-700: #1A3262;   /* = --brand-navy */
  --navy-600: #224281;
  --navy-500: #2B52A1;
  --navy-300: #8EAAE1;   /* dark-theme text/accent */
  --navy-100: #DFE7F6;
  --navy-050: #EFF3FB;

  /* ---- Teal ramp ---- */
  --teal-900: #043839;
  --teal-800: #065E60;
  --teal-700: #0B7C7F;   /* EXCEPTION: small teal text on paper (4.7:1).
                            Use only when navy genuinely will not do.        */
  --teal-600: #0A9396;   /* = --brand-teal */
  --teal-300: #3FD0D4;   /* dark-theme accent                                */
  --teal-100: #D9FCFC;
  --teal-050: #ECFDFE;

  /* ---- Semantic: surfaces ---- */
  --ground:      #F7F9F9;  /* page background                                */
  --surface:     #FFFFFF;  /* cards, panels                                  */
  --surface-2:   #EEF3F3;  /* insets, table headers, code                    */
  --surface-inv: #1A3262;  /* navy band                                      */
  /* Deeper than --surface-inv on purpose: the footer must read as sitting
     BELOW the page, not as a continuation of a navy section above it.      */
  --surface-foot: #0D1930;
  --surface-accent: #0A9396; /* teal band                                    */

  /* ---- Semantic: text ---- */
  --text:        #16211F;  /* body                       15.6:1 on ground    */
  --text-strong: #1A3262;  /* headings                   11.9:1 on ground    */
  --text-muted:  #54615F;  /* captions, meta              6.1:1 on ground    */
  --text-on-navy:#FFFFFF;  /*                            12.5:1 on navy      */
  --text-on-teal:#FFFFFF;  /* LARGE TEXT ONLY (>=24px)    3.7:1 on teal      */

  /* ---- Semantic: lines ---- */
  --line:        #DCE4E3;
  --line-strong: #C2CFCD;
  --line-accent: #0A9396;

  /* ---- Semantic: interaction ---- */
  --action:       #1A3262;
  --action-hover: #224281;
  --action-text:  #FFFFFF;
  --link:         #1A3262;
  --focus:        #0A9396;  /* 3.5:1 on ground — clears the 3:1 UI bar       */

  /* ---- Semantic: state ----
     Amber is the "needs review" state from SCOPE.md section 4 (a fact changed
     upstream, so this approved output must be re-checked). Green/red are
     deliberately restrained: this product has almost no destructive actions. */
  --flag:        #8A5A12;  /* needs review — text          5.6:1 on ground   */
  --flag-surface:#FBF3E4;
  --flag-line:   #E2C48A;
  --ok:          #1F6B4A;
  --ok-surface:  #E6F2EC;
  --danger:      #9B2C2C;
  --danger-surface:#FBEAEA;

  /* ---- Type ---- */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Measured from internology.org: h2 is Manrope 500 at -0.02em. */
  --tracking-display: -0.02em;
  --tracking-label:    0.08em;   /* uppercase eyebrows, nav                  */

  /* Type scale — 1.25 minor third, fluid between 390px and 1440px viewports */
  --step--1: clamp(0.83rem, 0.80rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.06rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.56rem, 1.41rem + 0.65vw, 1.94rem);
  --step-3:  clamp(1.95rem, 1.70rem + 1.09vw, 2.62rem);
  --step-4:  clamp(2.44rem, 2.02rem + 1.78vw, 3.53rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  /* ---- Space — 4px base ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;

  /* ---- Shape — 4px, matching her buttons ---- */
  --radius-sm: 3px;
  --radius:    4px;     /* measured from internology.org buttons             */
  --radius-lg: 8px;     /* cards                                             */
  --radius-pill: 999px;

  /* ---- Elevation — navy-tinted, never neutral grey ---- */
  --shadow-sm: 0 1px 2px rgba(26, 50, 98, .06);
  --shadow:    0 1px 2px rgba(26, 50, 98, .06), 0 8px 24px -12px rgba(26, 50, 98, .18);
  --shadow-lg: 0 2px 4px rgba(26, 50, 98, .07), 0 24px 48px -20px rgba(26, 50, 98, .26);

  /* ---- Layout ---- */
  --measure: 68ch;        /* reading width                                   */
  --container: 1160px;
  --container-narrow: 760px;

  --duration: 180ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

/* ---- Dark theme -----------------------------------------------------------
   internology.org has no dark mode; this is ours. Navy cannot be the text
   colour on a dark ground, so the roles swap: teal-300 becomes the accent and
   navy-300 the secondary. The brand constants above never change.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0E1A1B;
    --surface:     #162426;
    --surface-2:   #1E2E30;
    --surface-inv: #1A3262;
    --surface-foot: #080F1F;
    --surface-accent: #0B7C7F;

    --text:        #E4EDEC;
    --text-strong: #F2F7F6;
    --text-muted:  #93A5A3;

    --line:        #27383A;
    --line-strong: #375052;
    --line-accent: #3FD0D4;

    --action:       #3FD0D4;
    --action-hover: #6ADCDF;
    --action-text:  #0E1A1B;
    --link:         #3FD0D4;
    --focus:        #3FD0D4;

    --flag:        #E0A85A;
    --flag-surface:#2C2416;
    --flag-line:   #5C4A22;
    --ok:          #6BC79A;
    --ok-surface:  #162C22;
    --danger:      #E88B8B;
    --danger-surface:#2E1A1A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .7);
  }
}

/* Explicit dark choice must beat a light OS setting. */
:root[data-theme="dark"] {
  --ground:      #0E1A1B;
  --surface:     #162426;
  --surface-2:   #1E2E30;
  --surface-inv: #1A3262;
  --surface-foot: #080F1F;
  --surface-accent: #0B7C7F;

  --text:        #E4EDEC;
  --text-strong: #F2F7F6;
  --text-muted:  #93A5A3;

  --line:        #27383A;
  --line-strong: #375052;
  --line-accent: #3FD0D4;

  --action:       #3FD0D4;
  --action-hover: #6ADCDF;
  --action-text:  #0E1A1B;
  --link:         #3FD0D4;
  --focus:        #3FD0D4;

  --flag:        #E0A85A;
  --flag-surface:#2C2416;
  --flag-line:   #5C4A22;
  --ok:          #6BC79A;
  --ok-surface:  #162C22;
  --danger:      #E88B8B;
  --danger-surface:#2E1A1A;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -20px rgba(0, 0, 0, .7);
}

/* ============================================================================
   Base — the minimum every page inherits
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--step-4); font-weight: 500; }
h2 { font-size: var(--step-3); font-weight: 500; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--link); text-underline-offset: 2px; }

/* Nav and eyebrow labels are uppercase Nunito Sans on internology.org. */
.eyebrow, .nav-link {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Focus is teal so it reads against navy chrome as well as paper. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img, svg, video { max-width: 100%; height: auto; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Components — the small set the Builder actually needs
   ========================================================================= */

/* ---- Buttons — 4px radius, 12px 28px, 700 weight, measured from her site -- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 700;
  padding: 12px 28px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn-primary { background: var(--action); color: var(--action-text); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary {
  background: transparent; color: var(--text-strong); border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.btn-ghost { background: transparent; color: var(--link); padding-inline: var(--space-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---- Logo — MUST follow the theme ------------------------------------------
   The primary lockup's navy half is nearly invisible on a dark ground, and the
   reversed lockup's white half vanishes on a light one. Never ship one <img>
   and hope. Markup:

     <span class="logo">
       <img class="logo-on-light" src="/brand/internology-logo.png" alt="Internology">
       <img class="logo-on-dark"  src="/brand/internology-logo-reversed.png" alt="">
     </span>

   Inside a .band-navy or .band-teal, force the reversed asset with
   .logo--reversed regardless of theme, since those grounds are dark in both. */
.logo { display: inline-flex; }
.logo img { height: auto; }
.logo .logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo .logo-on-dark  { display: block; }
}
:root[data-theme="dark"] .logo .logo-on-light { display: none; }
:root[data-theme="dark"] .logo .logo-on-dark  { display: block; }

.band-navy .logo .logo-on-light, .band-teal .logo .logo-on-light,
.logo--reversed .logo-on-light { display: none; }
.band-navy .logo .logo-on-dark, .band-teal .logo .logo-on-dark,
.logo--reversed .logo-on-dark { display: block; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ---- Bands — teal and navy full-bleed sections, as on internology.org.
        Headings inside a teal band must be >=24px to clear contrast.       --- */
.band-teal { background: var(--surface-accent); color: #FFFFFF; }
.band-teal h1, .band-teal h2, .band-teal h3 { color: #FFFFFF; }
.band-navy { background: var(--surface-inv); color: #FFFFFF; }
.band-navy h1, .band-navy h2, .band-navy h3 { color: #FFFFFF; }
.band-teal a, .band-navy a { color: #FFFFFF; }

/* ---- Status pills — state reads as form, not only colour ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: 600;
  padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid;
}
.pill-draft    { color: var(--text-muted); border-color: var(--line-strong); background: var(--surface-2); }
.pill-review   { color: var(--flag); border-color: var(--flag-line); background: var(--flag-surface); }
.pill-approved { color: var(--ok); border-color: currentColor; background: var(--ok-surface); }

/* ---- Fact chips — a value carried from an earlier step (ask once, use
        everywhere). Teal on a tinted ground, which is a graphic use.      --- */
.fact-chip {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--teal-800); background: var(--teal-100);
  padding: 2px 7px; border-radius: var(--radius-sm);
}
:root[data-theme="dark"] .fact-chip,
:root:not([data-theme="light"]) .fact-chip {
  color: var(--teal-300); background: var(--teal-900);
}

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font-weight: 600; color: var(--text-strong); }
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.input, .textarea, .select {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 10px 12px; width: 100%;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand-teal); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
.stack > * + * { margin-top: var(--space-4); }
.prose { max-width: var(--measure); }