/* ==========================================================================
   iStudyBytes — Design tokens
   Layer 1 of 5:  tokens → base → layout → components → pages/<page>.css

   This file is the single source of truth for colour, type, spacing, shape
   and layout. Nothing here selects an element; every other stylesheet reads
   these custom properties. Change a value here and the whole site follows.
   ========================================================================== */

:root {
  /* ---- Colour: brand ---------------------------------------------------- */
  --brand: #2563eb;            /* actions, links, active states            */
  --brand-hover: #1d4ed8;
  --brand-soft: #eff6ff;       /* very light blue surfaces                 */
  --brand-tint: #dbeafe;       /* hover on soft surfaces, soft borders     */
  --brand-border: #bfdbfe;
  --logo-navy: #15326e;        /* wordmark: "iStudy"                       */
  --logo-blue: #2f6bff;        /* wordmark: "Bytes"                        */

  /* ---- Colour: neutrals ------------------------------------------------- */
  --ink: #0f172a;              /* dark navy: headings, key content         */
  --ink-soft: #1e3a8a;         /* second stop of the one dark hero panel   */
  --text: #334155;             /* body text                                */
  --muted: #64748b;            /* secondary text (AA on white and --bg)    */
  --line: #e2e8f0;             /* borders, dividers                        */
  --line-strong: #cbd5e1;      /* control borders, hover borders           */
  --bg: #f8fafc;               /* page background                          */
  --surface: #ffffff;          /* cards, header, inputs                    */

  /* ---- Colour: semantic (only where the meaning needs it) --------------- */
  --success: #15803d;
  --success-soft: #f0fdf4;
  --success-line: #bbf7d0;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;

  /* ---- Colour: footer (dark navy surface) ------------------------------- */
  --footer-bg: #0f172a;
  --footer-text: #cbd5e1;
  --footer-muted: #94a3b8;
  --footer-line: rgba(255, 255, 255, .12);

  /* ---- Typography ------------------------------------------------------- */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scale (rem, 1rem = 16px). Weights in use: 400 body · 500 UI · 600 card /
     UI headings · 700 page + section headings. All four are loaded. */
  --fs-display: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);   /* 40 → 56  home hero only        */
  --fs-h1: clamp(2rem, 1.65rem + 1.4vw, 2.75rem);        /* 32 → 44  page titles           */
  --fs-h2: clamp(1.5rem, 1.35rem + .6vw, 1.875rem);      /* 24 → 30  section headings      */
  --fs-h3: 1.25rem;                                      /* 20       card titles           */
  --fs-lead: 1.125rem;                                   /* 18       intro paragraphs      */
  --fs-base: 1rem;                                       /* 16       body                  */
  --fs-ui: .9375rem;                                     /* 15       nav, buttons, labels  */
  --fs-sm: .875rem;                                      /* 14       secondary, metadata   */
  --fs-xs: .75rem;                                       /* 12       captions, eyebrows    */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;
  --lh-prose: 1.75;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --s-1: .25rem;   /*  4 */
  --s-2: .5rem;    /*  8 */
  --s-3: .75rem;   /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-8: 2rem;     /* 32 */
  --s-10: 2.5rem;  /* 40 */
  --s-12: 3rem;    /* 48 */
  --s-16: 4rem;    /* 64 */
  --s-20: 5rem;    /* 80 */

  --card-pad: var(--s-6);                       /* 24 — every card             */
  --grid-gap: var(--s-5);                       /* 20 — every card grid        */
  --page-top: clamp(2rem, 1.4rem + 2.4vw, 3rem);       /* 32 → 48              */
  --page-bottom: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);  /* 56 → 88              */
  --section-gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);    /* 40 → 56 between page sections */
  --band-y: clamp(3rem, 2.4rem + 2.6vw, 5rem);         /* 48 → 80 home bands   */

  /* ---- Shape & depth ---------------------------------------------------- */
  --r-sm: 8px;      /* tiles, chips, small controls   */
  --r-md: 10px;     /* buttons, inputs                */
  --r-lg: 14px;     /* cards                          */
  --r-xl: 20px;     /* large panels                   */
  --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-form: 440px;
  --gutter: clamp(1rem, .5rem + 2vw, 2rem);     /* 16 → 32 */
  --header-h: 68px;

  /* ---- Motion / stacking ------------------------------------------------ */
  --ease: .15s ease;
  --z-header: 100;
  --z-menu: 110;
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }
}