/* ============================================================
   Humbug Digital — design tokens
   Single source of truth for web. Do not hand-edit values here;
   edit this file and copy it to consuming projects.
   Full standards: Humbug Foundations.dc.html
   ============================================================ */

:root {
  /* ---- brand ramps -------------------------------------- */
  /* Abyss — primary. Ink, dark surfaces, the brand's centre of gravity. */
  --hb-abyss-50:  #F2F8FB;
  --hb-abyss-100: #E4EFF4;
  --hb-abyss-200: #CEDFE9;
  --hb-abyss-300: #B1CAD8;
  --hb-abyss-400: #8FAFC0;
  --hb-abyss-500: #6E90A3;
  --hb-abyss-600: #557587;
  --hb-abyss-700: #3F5B6A;
  --hb-abyss-800: #2B424E;
  --hb-abyss-900: #192A33;
  --hb-abyss:     #0F3040;  /* base — sits between 800 and 900 */

  /* Signal — accent. Actions, links, focus rings. */
  --hb-signal-50:  #EBFAFF;
  --hb-signal-100: #D8F2FE;
  --hb-signal-200: #B8E4F9;
  --hb-signal-300: #8FD0EE;
  --hb-signal-400: #5DB6DB;
  --hb-signal-500: #2997C0;
  --hb-signal-600: #007BA2;
  --hb-signal-700: #006081;
  --hb-signal-800: #004660;
  --hb-signal-900: #002D40;
  --hb-signal:     #118AB2;  /* base — decorative only, fails 4.5:1 for text */

  /* Indigo — secondary. Categories, charts, quiet emphasis. */
  --hb-indigo-50:  #F5F6FE;
  --hb-indigo-100: #EAECF9;
  --hb-indigo-200: #D7DBF1;
  --hb-indigo-300: #BEC4E3;
  --hb-indigo-400: #A0A6CE;
  --hb-indigo-500: #8187B1;
  --hb-indigo-600: #676D94;
  --hb-indigo-700: #4F5476;
  --hb-indigo-800: #383C57;
  --hb-indigo-900: #23263A;
  --hb-indigo:     #464B71;

  /* Mint — highlight. Success, live states, data positives. Use sparingly. */
  --hb-mint-50:  #EDFAF8;
  --hb-mint-100: #DCF3EE;
  --hb-mint-200: #BEE6DF;
  --hb-mint-300: #99D3C9;
  --hb-mint-400: #6CBAAE;
  --hb-mint-500: #419C8F;
  --hb-mint-600: #228075;
  --hb-mint-700: #0B655B;
  --hb-mint-800: #004942;
  --hb-mint-900: #00302A;
  --hb-mint:     #7CD5C7;

  /* Neutral — warm at the top to meet the papers, cool at the bottom to meet Abyss. */
  --hb-neutral-50:  #F6F7F3;
  --hb-neutral-100: #ECEDE8;
  --hb-neutral-200: #DCDDD8;
  --hb-neutral-300: #C5C6C1;
  --hb-neutral-400: #A9AAA4;
  --hb-neutral-500: #858C90;
  --hb-neutral-600: #6A7176;
  --hb-neutral-700: #50585D;
  --hb-neutral-800: #384045;
  --hb-neutral-900: #21292E;

  /* Papers. Never adjacent as two large fields — reads as a rendering bug. */
  --hb-paper:      #F2F2ED;  /* page ground */
  --hb-paper-warm: #EBEDE3;  /* recessed panels, wells */

  /* Semantic. Added in Phase 1 — the six base colours contained no warm hue. */
  --hb-success:    #228075;  --hb-success-fill: #DCF3EE;
  --hb-info:       #007BA2;  --hb-info-fill:    #D8F2FE;
  --hb-warning:    #B26B11;  --hb-warning-fill: #FBF0DC;
  --hb-danger:     #A32F2F;  --hb-danger-fill:  #F9E3E3;

  /* ---- semantic roles (light) ---------------------------- */
  --hb-bg:            var(--hb-paper);
  --hb-surface:       var(--hb-paper-warm);
  --hb-text:          var(--hb-abyss);
  --hb-text-muted:    var(--hb-neutral-700);
  --hb-border:        var(--hb-neutral-300);
  --hb-action:        var(--hb-signal-600);  /* solid fills + white text */
  --hb-action-hover:  var(--hb-signal-700);
  --hb-action-active: var(--hb-signal-800);
  --hb-link:          var(--hb-signal-700);
  --hb-link-hover:    var(--hb-signal-900);
  --hb-focus:         var(--hb-signal);

  /* ---- type --------------------------------------------- */
  --hb-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --hb-font-body:    "Barlow", system-ui, sans-serif;
  --hb-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --hb-text-display:  64px;  --hb-lh-display:  0.92;
  --hb-text-h1:       44px;  --hb-lh-h1:       1.00;
  --hb-text-h2:       34px;  --hb-lh-h2:       1.10;
  --hb-text-h3:       24px;  --hb-lh-h3:       1.20;
  --hb-text-lead:     19px;  --hb-lh-lead:     1.55;
  --hb-text-body:     16px;  --hb-lh-body:     1.60;
  --hb-text-ui:     13.5px;  --hb-lh-ui:       1.45;
  --hb-text-overline: 11px;  --hb-lh-overline: 1.30;
  --hb-tracking-overline: 0.16em;

  /* ---- space (4px base, 8px rhythm) --------------------- */
  --hb-space-1:  4px;   /* icon gaps, hairline insets */
  --hb-space-2:  8px;   /* label to field */
  --hb-space-3:  12px;  /* inside chips, list rows */
  --hb-space-4:  16px;  /* card padding, mobile gutter */
  --hb-space-5:  24px;  /* card padding desktop, grid gap */
  --hb-space-6:  40px;  /* between subsections */
  --hb-space-7:  64px;  /* between page sections */
  --hb-space-8:  96px;  /* hero top/bottom */

  /* ---- form --------------------------------------------- */
  --hb-radius-none: 0;      /* frames */
  --hb-radius-sm:   4px;    /* controls */
  --hb-radius-pill: 999px;  /* chips only */

  --hb-shadow-sm: 0 1px 2px rgba(15, 48, 64, 0.08), 0 1px 3px rgba(15, 48, 64, 0.06);
  --hb-shadow-md: 0 2px 6px rgba(15, 48, 64, 0.10), 0 6px 16px rgba(15, 48, 64, 0.08);
  --hb-shadow-lg: 0 8px 24px rgba(15, 48, 64, 0.14), 0 16px 48px rgba(15, 48, 64, 0.10);

  /* ---- layout ------------------------------------------- */
  --hb-measure:   68ch;    /* reading copy caps here */
  --hb-max-width: 1180px;
  --hb-gutter:    24px;
  --hb-touch:     36px;    /* web minimum */
  --hb-touch-coarse: 44px; /* touch pointers */
}

/* ============================================================
   Dark scheme. Derived from the Android dark ramps so web and
   app agree. NOTE: the web component set has not been audited
   against these yet — see Humbug Web Components.dc.html.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --hb-bg:            #0D2632;
    --hb-surface:       #183744;
    --hb-text:          #DEE6EB;
    --hb-text-muted:    #B1CAD8;
    --hb-border:        #3F5B6A;
    --hb-action:        var(--hb-signal-300);  /* light fills + dark text on dark grounds */
    --hb-action-hover:  var(--hb-signal-200);
    --hb-action-active: var(--hb-signal-100);
    --hb-link:          var(--hb-signal-300);
    --hb-link-hover:    var(--hb-signal-100);
    --hb-focus:         var(--hb-signal-300);
  }
}

/* ============================================================
   Base. Minimal on purpose — everything else is yours.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hb-bg);
  color: var(--hb-text);
  font-family: var(--hb-font-body);
  font-size: var(--hb-text-body);
  line-height: var(--hb-lh-body);
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--hb-font-heading);
  font-weight: 700;
  margin: 0;
}

a {
  color: var(--hb-link);
  text-decoration: none;
  border-bottom: 1px solid var(--hb-signal-300);
}
a:hover { color: var(--hb-link-hover); border-bottom-color: var(--hb-link); }

:focus-visible { outline: 2px solid var(--hb-focus); outline-offset: 2px; }

::selection { background: var(--hb-signal-100); color: var(--hb-signal-900); }

/* Tabular figures in every table, timetable and dashboard. */
table, .hb-numeric { font-variant-numeric: tabular-nums; }

/* Inputs stay 16px on mobile — anything smaller makes iOS zoom on focus. */
input, select, textarea { font-size: 16px; }