/* Burger Bangor — design tokens (colour, type, spacing).
   Ditranskripsi verbatim dari design system (_ds/tokens/*).
   primary-500 (#97cc00) adalah signature Bangor green. */

:root {
  /* ── Primary · brand green ───────────────────────────── */
  --primary-100: #dfefb0;
  --primary-200: #cfe88a;
  --primary-300: #b9dd54;
  --primary-400: #acd633;
  --primary-500: #97cc00;
  --primary-600: #89ba00;
  --primary-700: #6b9100;
  --primary-800: #537000;
  --primary-900: #3f5600;

  /* ── Dark · neutral greyscale (dark end) ─────────────── */
  --dark-100: #bababa;
  --dark-200: #999999;
  --dark-300: #6e6e6e;
  --dark-400: #4e4e4e;
  --dark-500: #222222;
  --dark-600: #1f1f1f;
  --dark-700: #181818;
  --dark-800: #131313;
  --dark-900: #0e0e0e;

  /* ── White · neutral greyscale (light end) ───────────── */
  --white-50:  #ffffff;
  --white-100: #f2f2f2;
  --white-200: #e8e8e8;
  --white-300: #b5b5b5;
  --white-400: #8c8c8c;
  --white-500: #6b6b6b;

  /* ── Error · red ─────────────────────────────────────── */
  --error-100: #ffb7b7;
  --error-200: #ff9595;
  --error-300: #ff6464;
  --error-400: #ff4646;
  --error-500: #ff1818;
  --error-600: #e81616;
  --error-700: #b31111;
  --error-800: #8c0d0d;
  --error-900: #6b0a0a;

  /* ── Info · blue ─────────────────────────────────────── */
  --info-100: #bdd0fd;
  --info-200: #9dbafc;
  --info-300: #709afb;
  --info-400: #5586fa;
  --info-500: #3d73f0;
  --info-600: #265fe3;
  --info-700: #1e4ab1;
  --info-800: #173989;
  --info-900: #122c69;

  /* ── Semantic aliases ────────────────────────────────── */
  --brand:            var(--primary-500);
  --brand-hover:      var(--primary-600);
  --brand-active:     var(--primary-700);

  --ink:              #343330;
  --text-heading:     var(--dark-500);
  --text-body:        var(--ink);
  --text-muted:       var(--white-500);
  --text-disabled:    var(--white-300);
  --text-on-brand:    #ffffff;
  --text-on-dark:     #ffffff;

  --surface:          var(--white-50);
  --surface-muted:    var(--white-100);
  --surface-dark:     var(--dark-500);
  --surface-inverse:  #000000;

  --border:           #e9e9e9;
  --border-strong:    var(--white-200);
  --border-focus:     var(--primary-500);

  --success:          var(--primary-600);
  --danger:           var(--error-500);
  --warning:          #f1b104;
  --link:             var(--primary-700);
  --link-hover:       var(--primary-800);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: "Futura PT", "Futura", "Trebuchet MS", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --h1: 48px;
  --h2: 44px;
  --h3: 40px;
  --h4: 36px;
  --h5: 32px;
  --h6: 28px;
  --heading-weight: 700;
  --heading-leading: 1.1;
  --heading-tracking: 0.01em;

  --text-2xl: 24px;
  --text-xl: 22px;
  --text-lg: 20px;
  --text-md: 18px;
  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --text-2xs: 10px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ── Spacing · 4px base grid ─────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius ──────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ── Elevation ───────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(14,14,14,0.06);
  --shadow-md: 0 4px 12px rgba(14,14,14,0.08);
  --shadow-lg: 0 12px 32px rgba(14,14,14,0.12);
  --shadow-brand: 0 8px 24px rgba(151,204,0,0.28);

  --ring: 0 0 0 3px rgba(151,204,0,0.35);
}

/* Heading helpers — Futura Bold + Title Case, per brand direction. */
.bb-h1, .bb-h2, .bb-h3, .bb-h4, .bb-h5, .bb-h6 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  text-transform: capitalize;
  color: var(--text-heading);
  margin: 0;
}
.bb-h1 { font-size: var(--h1); }
.bb-h2 { font-size: var(--h2); }
.bb-h3 { font-size: var(--h3); }
.bb-h4 { font-size: var(--h4); }
.bb-h5 { font-size: var(--h5); }
.bb-h6 { font-size: var(--h6); }