/* ============================================================
   THEME — the only file you edit for a new app.
   Change the values here, leave base.css alone, and the whole
   site re-skins. Everything is derived from these tokens.
   ============================================================ */

:root {

  /* --- 1. BRAND COLOUR ----------------------------------------
     Pick one hue. Everything else is generated from it.
     Use a mid-tone that stays readable on white; if your app
     icon is very light, darken it here rather than in base.css. */

  --brand:        #2563eb;   /* buttons, links, accents        */
  --brand-dark:   #1d4ed8;   /* hover state                    */
  --brand-tint:   #eff5ff;   /* hero wash, quiet section bands */
  --brand-ink:    #1e3a8a;   /* headings on tinted backgrounds */

  /* --- 2. NEUTRALS --------------------------------------------
     Warm greys read friendlier than pure grey. Leave unless the
     brand hue clashes. */

  --ink:          #0f172a;   /* body text                      */
  --ink-soft:     #475569;   /* secondary text                 */
  --ink-faint:    #94a3b8;   /* captions, meta                 */
  --line:         #e2e8f0;   /* borders, rules                 */
  --surface:      #ffffff;   /* page background                */
  --surface-alt:  #f8fafc;   /* cards, alternating bands       */

  /* --- 3. STATUS COLOURS --------------------------------------
     Used by compatibility tables and callouts. Rarely changed. */

  --ok:           #059669;
  --ok-tint:      #ecfdf5;
  --warn:         #b45309;
  --warn-tint:    #fffbeb;
  --bad:          #dc2626;
  --bad-tint:     #fef2f2;

  /* --- 4. SHAPE & DEPTH ---------------------------------------
     Larger radius reads friendlier and more "app". */

  --radius:       14px;
  --radius-lg:    22px;
  --shadow:       0 1px 2px rgb(15 23 42 / .04),
                  0 8px 24px -12px rgb(15 23 42 / .12);
  --shadow-lift:  0 2px 4px rgb(15 23 42 / .05),
                  0 20px 40px -16px rgb(15 23 42 / .20);

  /* --- 5. RHYTHM ----------------------------------------------
     The single biggest fix over a cramped layout is spacing.
     Do not reduce these to fit more in. */

  --gap-section:  5.5rem;    /* between major sections          */
  --gap-block:    2.2rem;    /* between blocks inside a section */
  --wrap-wide:    68rem;     /* landing page                    */
  --wrap-read:    42rem;     /* article body — keep it narrow   */

  /* --- 6. TYPE ------------------------------------------------ */

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* --- 7. DARK MODE ---------------------------------------------
   Only the tokens change. Nothing in base.css needs to know. */

@media (prefers-color-scheme: dark) {
  :root {
    --brand:       #60a5fa;
    --brand-dark:  #93c5fd;
    --brand-tint:  #172033;
    --brand-ink:   #bfdbfe;

    --ink:         #e8edf5;
    --ink-soft:    #a3b0c2;
    --ink-faint:   #6b7a90;
    --line:        #263145;
    --surface:     #0d1220;
    --surface-alt: #151c2c;

    --ok-tint:     #0d2a20;
    --warn-tint:   #2a2113;
    --bad-tint:    #2b1618;

    --shadow:      0 1px 2px rgb(0 0 0 / .3),
                   0 8px 24px -12px rgb(0 0 0 / .6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / .35),
                   0 20px 40px -16px rgb(0 0 0 / .7);
  }
}