/* ===========================================================
   B4A Crew — Design Tokens
   Three themes, one token set. Apply [data-theme="light|dark|hc"].
   =========================================================== */

:root, [data-theme="light"] {
  /* Surfaces */
  --paper:        #f1ece2;    /* base canvas: warm cream, NOT white */
  --paper-deep:   #e6dfd0;    /* recessed area (form fields, grid bg) */
  --surface-1:    #fbf7ee;    /* raised card */
  --ink:          #0d0d0d;    /* near-black, NOT pure */
  --ink-soft:     #1f1c18;

  /* Text */
  --text-primary:  #0d0d0d;
  --text-secondary:#3a352c;
  --text-muted:    #756d5c;
  --text-inverse:  #f1ece2;

  /* Lines */
  --border:        #0d0d0d;
  --border-soft:   #b8ad97;
  --border-w:      2px;       /* default stroke */
  --border-w-bold: 3px;       /* primary buttons, marks */

  /* Brand + semantic */
  --accent:        #ff3b1f;   /* B4A vermillion */
  --accent-deep:   #d62a0f;
  --accent-ink:    #0d0d0d;   /* text/icon ON accent — always near-black */
  --success:       #1d7d3a;
  --danger:        #cc0033;
  --warning:       #ffd400;

  /* Patch/sticker color set (achievements) */
  --patch-1: #ff3b1f;
  --patch-2: #ffd400;
  --patch-3: #2547d0;
  --patch-4: #0d0d0d;

  /* Motion */
  --beat: 140ms;              /* short snap */
  --measure: 280ms;           /* drawer / view */
  --ease-snap: cubic-bezier(.2, .7, .2, 1);

  /* Shape — no rounded SaaS cards */
  --radius-0: 0;
  --radius-1: 2px;            /* hairline rounding only where really needed */
  --radius-pill: 999px;

  /* Type */
  --font-display: "Big Shoulders Stencil Text", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-headline: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   19px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.45;

  /* Touch */
  --hit: 48px;                /* min target — > 44 mandate */
}

/* -----------------------------------------------------------
   DARK — "Nacht"
   Akku-schonend, near-true-black base, vermillion still pops
   ----------------------------------------------------------- */
[data-theme="dark"] {
  --paper:        #050505;    /* OLED-friendly near-black */
  --paper-deep:   #000000;    /* true black for OLED */
  --surface-1:    #131311;
  --ink:          #f1ece2;
  --ink-soft:     #d6cfbe;

  --text-primary:  #f1ece2;
  --text-secondary:#bcb5a2;
  --text-muted:    #786f5b;
  --text-inverse:  #050505;

  --border:        #f1ece2;
  --border-soft:   #3a352c;

  --accent:        #ff4f2e;   /* slightly desat for night */
  --accent-deep:   #ff3b1f;
  --accent-ink:    #050505;
  --success:       #3ed26b;
  --danger:        #ff5577;
  --warning:       #ffd400;

  --patch-1: #ff4f2e;
  --patch-2: #ffd400;
  --patch-3: #5a7dff;
  --patch-4: #f1ece2;
}

/* -----------------------------------------------------------
   HIGH-CONTRAST — "Sonne"
   Pure black on white, max saturation, thicker strokes
   ----------------------------------------------------------- */
[data-theme="hc"] {
  --paper:        #ffffff;
  --paper-deep:   #ffffff;
  --surface-1:    #ffffff;
  --ink:          #000000;
  --ink-soft:     #000000;

  --text-primary:  #000000;
  --text-secondary:#000000;
  --text-muted:    #444444;
  --text-inverse:  #ffffff;

  --border:        #000000;
  --border-soft:   #000000;
  --border-w:      3px;
  --border-w-bold: 4px;

  --accent:        #ff1a00;
  --accent-deep:   #cc0000;
  --accent-ink:    #ffffff;
  --success:       #006622;
  --danger:        #cc0000;
  --warning:       #ffcc00;

  --patch-1: #ff1a00;
  --patch-2: #ffcc00;
  --patch-3: #0033cc;
  --patch-4: #000000;
}

/* ===========================================================
   Base resets scoped to themed surfaces
   =========================================================== */
.b4a {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02", "cv11";
}
.b4a *, .b4a *::before, .b4a *::after { box-sizing: border-box; }
.b4a button { font-family: inherit; }

/* Display + headline classes */
.b4a-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.b4a-headline {
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.b4a-eyebrow {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.b4a-mono {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}