/* =========================================================================
   Design tokens
   The single source of truth for colour, type, space, radius and motion.
   Nothing anywhere else in this project should hard-code a hex value.
   ========================================================================= */

:root {
  /* ---- brand ---------------------------------------------------------- */
  /* Navy, sampled from the brand mark (#373a79 is the logo's own value and
     sits at 600, where the primary button and link colour are taken from). */
  --brand-50:  #eef0fa;
  --brand-100: #dde1f3;
  --brand-200: #bcc2e6;
  --brand-300: #939bd4;
  --brand-400: #6c75bf;
  --brand-500: #4c55a3;
  --brand-600: #373a79;
  --brand-700: #2e3164;
  --brand-800: #262851;
  --brand-900: #1d1f3f;

  /* Red, sampled from the "News" half of the wordmark (#ed3237). It is the
     brand's only accent: reserved for live/breaking markers, deadlines and
     the single strongest call to action on a page. Used sparingly - a red
     that appears everywhere stops meaning anything. */
  --gold-100: #fde9ea;
  --gold-300: #f6a2a5;
  --gold-500: #ed3237;
  --gold-600: #d51f24;
  --gold-700: #ab171b;

  /* ---- neutrals ------------------------------------------------------- */
  --ink-0:   #ffffff;
  --ink-25:  #fbfbfe;
  --ink-50:  #f6f6fb;
  --ink-100: #eeeef6;
  --ink-200: #e0e0ec;
  --ink-300: #c7c7d9;
  --ink-400: #9a9ab4;
  --ink-500: #6f6f8d;
  --ink-600: #545470;
  --ink-700: #3d3d56;
  --ink-800: #262639;
  --ink-900: #17172a;
  --ink-950: #0d0d1a;

  /* ---- semantic ------------------------------------------------------- */
  --success-50:  #e8faf1;
  --success-500: #12a45f;
  --success-600: #0d8b50;
  --success-700: #0a6d3f;

  --warning-50:  #fff6e5;
  --warning-500: #e08700;
  --warning-600: #b96f00;

  --danger-50:  #feecef;
  --danger-500: #dc2f45;
  --danger-600: #b91f35;

  --info-50:  #e8f2ff;
  --info-500: #1f6feb;
  --info-600: #1857bd;

  /* ---- surfaces ------------------------------------------------------- */
  --bg:           var(--ink-50);
  --bg-elevated:  var(--ink-0);
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--ink-900);
  --surface:      var(--ink-0);
  --surface-alt:  var(--ink-25);
  --border:       var(--ink-200);
  --border-strong: var(--ink-300);

  --text:         var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-inverse: var(--ink-0);
  --text-brand:   var(--brand-600);

  /* ---- typography ----------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, monospace;

  /* Fluid scale. Each step interpolates between a mobile and a desktop size
     so nothing has to be re-tuned per breakpoint. */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --text-xl:   clamp(1.1875rem, 0.6vw + 1.07rem, 1.375rem);
  --text-2xl:  clamp(1.375rem, 1vw + 1.18rem, 1.75rem);
  --text-3xl:  clamp(1.75rem, 2vw + 1.35rem, 2.5rem);
  --text-4xl:  clamp(2.125rem, 3.4vw + 1.45rem, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- space (4px base) ----------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- radius --------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(23, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(23, 23, 42, 0.06), 0 1px 2px rgba(23, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 23, 42, 0.07), 0 2px 4px rgba(23, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(23, 23, 42, 0.09), 0 4px 8px rgba(23, 23, 42, 0.04);
  --shadow-xl: 0 24px 56px rgba(23, 23, 42, 0.13), 0 8px 16px rgba(23, 23, 42, 0.05);
  --shadow-brand: 0 10px 30px rgba(55, 58, 121, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- gradients ------------------------------------------------------ */
  --gradient-brand: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 55%, var(--brand-400) 100%);
  --gradient-gold:  linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%);
  --gradient-mesh:
    radial-gradient(1000px 500px at 8% -10%, rgba(55, 58, 121, 0.14), transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(237, 50, 55, 0.10), transparent 62%),
    radial-gradient(720px 520px at 50% 108%, rgba(76, 85, 163, 0.12), transparent 60%);
  --gradient-sheen: linear-gradient(120deg,
      rgba(255,255,255,0) 20%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 80%);

  /* ---- glass ---------------------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-blur: saturate(180%) blur(14px);

  /* ---- motion --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
  --duration-slower: 620ms;

  /* ---- layout --------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --container-wide: 1440px;
  --header-height: 68px;
  --sidebar-width: 264px;
  --sidebar-collapsed: 76px;

  /* ---- z-index -------------------------------------------------------- */
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ---- focus ---------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(76, 85, 163, 0.38);
  --focus-ring-danger: 0 0 0 3px rgba(237, 50, 55, 0.32);
}

/* =========================================================================
   Dark theme
   Applied when the OS asks for it, or when the user picks it explicitly.
   Only the tokens change - no component needs a dark-mode rule of its own.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--ink-950);
    --bg-elevated:  #15152a;
    --bg-sunken:    #0a0a15;
    --surface:      #15152a;
    --surface-alt:  #1c1c33;
    --border:       #2a2a45;
    --border-strong: #3a3a58;

    --text:         #e9e9f4;
    --text-muted:   #a3a3bf;
    --text-subtle:  #7a7a99;
    --text-inverse: var(--ink-950);
    --text-brand:   var(--brand-300);

    --brand-50:  #1e2046;
    --brand-100: #272a58;

    --success-50: #0d2b1e;
    --warning-50: #2e2210;
    --danger-50:  #331119;
    --info-50:    #101f38;

    --glass-bg: rgba(21, 21, 42, 0.74);
    --glass-border: rgba(255, 255, 255, 0.09);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --gradient-mesh:
      radial-gradient(1000px 500px at 8% -10%, rgba(108, 117, 191, 0.24), transparent 60%),
      radial-gradient(760px 420px at 96% 4%, rgba(237, 50, 55, 0.12), transparent 62%),
      radial-gradient(720px 520px at 50% 108%, rgba(76, 85, 163, 0.16), transparent 60%);
  }
}

:root[data-theme="dark"] {
  --bg:           var(--ink-950);
  --bg-elevated:  #15152a;
  --bg-sunken:    #0a0a15;
  --surface:      #15152a;
  --surface-alt:  #1c1c33;
  --border:       #2a2a45;
  --border-strong: #3a3a58;

  --text:         #e9e9f4;
  --text-muted:   #a3a3bf;
  --text-subtle:  #7a7a99;
  --text-inverse: var(--ink-950);
  --text-brand:   var(--brand-300);

  --brand-50:  #1e2046;
  --brand-100: #272a58;

  --success-50: #0d2b1e;
  --warning-50: #2e2210;
  --danger-50:  #331119;
  --info-50:    #101f38;

  --glass-bg: rgba(21, 21, 42, 0.74);
  --glass-border: rgba(255, 255, 255, 0.09);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* =========================================================================
   1HR News additions
   Editorial, tools, scholarships and advertising tokens layered on top of the
   core set above. The same rule applies: no component may hard-code a hex.
   ========================================================================= */

:root {
  /* ---- reading ---------------------------------------------------------
     Long-form body copy needs its own scale. The UI scale above is tuned for
     dense product screens; an article read end to end wants a larger body
     size, a looser line height and a hard cap on line length. 66ch is the
     comfortable measure for Latin text - past roughly 75ch the eye loses the
     return sweep and starts re-reading lines. */
  --measure:         66ch;
  --measure-wide:    74ch;
  --article-body:    clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --article-lead:    clamp(1.1875rem, 0.7vw + 1.05rem, 1.375rem);
  --article-h2:      clamp(1.375rem, 1.2vw + 1.15rem, 1.75rem);
  --article-h3:      clamp(1.125rem, 0.6vw + 1.02rem, 1.3125rem);
  --article-leading: 1.75;
  --article-gap:     1.35em;

  /* ---- page headings ---------------------------------------------------
     The hero h1 is the largest type on the site, and every other page title
     is derived from it rather than sized independently. --page-title is the
     hero minus 2px, so an article or scholarship headline sits just below the
     homepage masthead at EVERY viewport width - the two scale together
     because they share one expression, which a pair of separate clamps could
     never guarantee. */
  --hero-title: clamp(1.6rem, 2.5vw + 0.85rem, 2.45rem);
  /* Derived from the hero by a factor rather than a fixed offset, so it can
     never exceed it at any width - and comfortably smaller than the masthead,
     which is what an article or scholarship headline should be once the
     featured image is carrying the top of the page. */
  --page-title: calc(var(--hero-title) * 0.78);

  /* ---- category accents ------------------------------------------------
     One hue per content category, so a card is identifiable before its label
     is read. Each is a foreground/background pair holding AA contrast; the
     dark theme re-declares both halves rather than dimming one. */
  --cat-education-fg:    #373a79;
  --cat-education-bg:    #eef0fa;
  --cat-scholarships-fg: #0d8b50;
  --cat-scholarships-bg: #e4f7ee;
  --cat-exams-fg:        #a35f00;
  --cat-exams-bg:        #fff3e0;
  --cat-tech-fg:         #1857bd;
  --cat-tech-bg:         #e7f0ff;
  --cat-careers-fg:      #a8317a;
  --cat-careers-bg:      #fdeaf5;
  --cat-global-fg:       #0f6f7d;
  --cat-global-bg:       #e2f5f8;

  /* ---- tool tiers ------------------------------------------------------ */
  --tier-free-fg:    var(--success-700);
  --tier-free-bg:    var(--success-50);
  --tier-trial-fg:   var(--info-600);
  --tier-trial-bg:   var(--info-50);
  --tier-premium-fg: var(--gold-700);
  --tier-premium-bg: var(--gold-100);

  /* ---- deadline urgency (scholarships) --------------------------------- */
  --deadline-open-fg:   var(--success-700);
  --deadline-open-bg:   var(--success-50);
  --deadline-soon-fg:   var(--warning-600);
  --deadline-soon-bg:   var(--warning-50);
  --deadline-closed-fg: var(--ink-500);
  --deadline-closed-bg: var(--ink-100);

  /* ---- advertising -----------------------------------------------------
     Ad slots reserve their height before the network responds. An unreserved
     slot shoves the article down when it fills: that is a Cumulative Layout
     Shift hit, and CLS is both a ranking signal and the thing that makes a
     reader lose their place mid-sentence. */
  --ad-slot-leaderboard: 90px;
  --ad-slot-inarticle:   280px;
  --ad-slot-rectangle:   250px;
  --ad-slot-sidebar:     600px;
  --ad-label-size:       0.6875rem;
  --ad-bg:               var(--ink-50);
  --ad-border:           var(--ink-200);

  /* ---- editorial surfaces ---------------------------------------------- */
  --takeaway-bg:     var(--brand-50);
  --takeaway-border: var(--brand-200);
  --figure-caption:  var(--text-subtle);
  --quote-bar:       var(--brand-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-education-bg:    #221c4d;
    --cat-scholarships-bg: #0d2b1e;
    --cat-exams-bg:        #2e2210;
    --cat-tech-bg:         #101f38;
    --cat-careers-bg:      #33132a;
    --cat-global-bg:       #0b2b30;

    --cat-education-fg:    #a89dfb;
    --cat-scholarships-fg: #4fd18d;
    --cat-exams-fg:        #ffc766;
    --cat-tech-fg:         #74a9f5;
    --cat-careers-fg:      #f08cc8;
    --cat-global-fg:       #59c9d8;

    --tier-premium-fg: var(--gold-300);
    --tier-premium-bg: #33260c;

    --deadline-closed-fg: var(--ink-400);
    --deadline-closed-bg: #23233a;

    --ad-bg:     #131327;
    --ad-border: #2a2a45;

    --takeaway-bg:     #1d1842;
    --takeaway-border: #362c72;
  }
}

:root[data-theme="dark"] {
  --cat-education-bg:    #221c4d;
  --cat-scholarships-bg: #0d2b1e;
  --cat-exams-bg:        #2e2210;
  --cat-tech-bg:         #101f38;
  --cat-careers-bg:      #33132a;
  --cat-global-bg:       #0b2b30;

  --cat-education-fg:    #a89dfb;
  --cat-scholarships-fg: #4fd18d;
  --cat-exams-fg:        #ffc766;
  --cat-tech-fg:         #74a9f5;
  --cat-careers-fg:      #f08cc8;
  --cat-global-fg:       #59c9d8;

  --tier-premium-fg: var(--gold-300);
  --tier-premium-bg: #33260c;

  --deadline-closed-fg: var(--ink-400);
  --deadline-closed-bg: #23233a;

  --ad-bg:     #131327;
  --ad-border: #2a2a45;

  --takeaway-bg:     #1d1842;
  --takeaway-border: #362c72;
}