/* GigRally design tokens.
 *
 * Transcribed from the Claude Design canvas export in docs/design/ — the token table in
 * its README plus the inline styles on the artboards, which are the exact visual spec.
 * Nothing downstream writes a raw hex or a magic pixel value, so a brand change happens
 * here and nowhere else.
 *
 * ⚠️ "ink" is not "dark" and "paper" is not "light". They are roles: ink is the strong
 * foreground and the solid-fill colour, paper is the page. In the dark theme ink is a
 * near-white and paper is a near-black. Everything downstream is written against the
 * role, which is what lets one stylesheet serve both themes.
 *
 * Theming: the default follows the device. A manual choice in Account sets data-theme on
 * <html>, and that always wins — the :not() guard lets an explicit "light" beat OS dark.
 */

:root {
  color-scheme: light;

  /* --- palette (light) --------------------------------------------------------- */
  --ink: #1a1714;            /* text, and the solid fill for "free" and "everyone" */
  --paper: #f4efe6;          /* page */
  --card: #fbf8f2;           /* raised surface; the heatmap mixes against THIS, not paper */
  --muted: #5e574d;          /* secondary text */
  --line: #d9d1c3;           /* borders */
  --on-ink: #cfc7b8;         /* text on an ink fill */
  /* A date that cannot be marked. ⚠️ Deliberately ~2:1 against the page — it is
   * incidental text (the day number on a day nobody can tap; the information is which
   * days ARE tappable), so it sits below AA on purpose. Flagged to Tank 26 Sep 2026. */
  --day-disabled: #b3aa9b;
  --error: #8a3b2e;
  --saved: #3e6b4a;          /* the "Saved" dot; 3:1 is the bar for a non-text graphic */
  --success: #3e6b4a;        /* a thing you asked for happened; same green as --saved */
  /* The fill behind one month block. ⚠️ DARKER than the page, never lighter — the cells
   * sitting on it are --card and lighter shades, and a lighter block swallows the palest
   * of them. Measured: the band view's lightest heat step against this is a clear step,
   * where a --card-coloured block put it at 1.02:1. */
  --cal-block: color-mix(in srgb, var(--line) 22%, var(--paper));

  /* Hatch fills. The angle and stripe widths are part of the identity of the state,
   * not decoration — they are what make busy legible without colour. */
  --hatch-busy: repeating-linear-gradient(135deg, #e4dccd 0 3px, #fbf8f2 3px 8px);
  --hatch-booked: repeating-linear-gradient(135deg, #cfc5b3 0 3px, #e9e2d5 3px 7px);

  /* --- accent ------------------------------------------------------------------ */
  /* Stage gold. Deliberately a variable rather than a constant: a Band-tier band can
   * override --accent on its own pages and every mix below follows. --on-accent stays
   * ink in both themes and is NOT band-overridable — a customer must not be able to
   * pick a pale accent and make their own band's buttons unreadable. */
  --accent: #e3a72f;
  --on-accent: #1a1714;
  /* Accent-coloured TEXT. ⚠️ NOT --accent: stage gold on paper is 1.86:1. This is the
   * same gold darkened until it clears AA on the page (4.97:1), so a badge or a label
   * can read as accented and still be readable. components.css consumes it. */
  --accent-ink: #8a5e0f;

  /* --- heatmap ------------------------------------------------------------------ */
  /* One hue, light to dark — sequential data never gets a rainbow, and the top step is
   * not a new colour. Mixed against --card so it sits correctly on the calendar
   * surface. Verified monotonic in lightness in both themes. */
  --heat-few: var(--card);
  --heat-some: color-mix(in srgb, var(--accent) 32%, var(--card));
  --heat-most: color-mix(in srgb, var(--accent) 70%, var(--card));
  --heat-everyone: var(--ink);

  /* ⚠️ Each step names its own text colour, and the flip happens at a DIFFERENT step in
   * each theme — light flips only on "everyone", dark flips a step earlier on "most".
   * Measured: in dark, ink on "most" is 3.15:1 and paper on it is 4.97:1. A single
   * "flip on the last step" rule silently fails the dark theme, which is exactly the
   * kind of thing nobody notices because they are looking at the other one. */
  --on-heat-few: var(--ink);
  --on-heat-some: var(--ink);
  --on-heat-most: var(--ink);
  --on-heat-everyone: var(--paper);

  /* Tinted panels (the Check-your-email illustration, upgrade callouts). */
  --accent-wash: color-mix(in srgb, var(--accent) 35%, var(--card));
  --accent-veil: color-mix(in srgb, var(--accent) 35%, transparent);

  /* --- type --------------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", Georgia, serif;   /* headings, numbers, wordmark */
  --font-body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;         /* uppercase labels, dates, counts */

  /* Sizes are the literal values off the artboards rather than a tidied scale, so a
   * rebuilt screen matches its design pixel for pixel. */
  --text-micro: 9px;      /* holiday abbreviation inside a day cell */
  --text-label: 11px;     /* DM Mono uppercase label */
  --text-label-lg: 12px;
  --text-xs: 12.5px;
  --text-sm: 13.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 17px;
  --text-h3: 19px;
  --text-h2: 20px;
  --text-h1-sm: 26px;
  --text-h1: 30px;
  --text-hero: 36px;
  --text-display: 44px;

  --tracking-label: 0.12em;   /* DM Mono uppercase labels */
  --tracking-display: -0.03em; /* Bricolage headings are tight */

  /* --- shape -------------------------------------------------------------------- */
  /* ⚠️ --radius-sm was USED in three places and defined in none. Two of them carry a
     fallback (`var(--radius-sm, 4px)`) and looked fine, which is why it went unnoticed;
     .badge--ink had no fallback, so its border-radius was an invalid declaration and
     the badge rendered with square corners. A var() with no fallback and no definition
     fails silently to the property's initial value — never to the value you meant. */
  --radius-sm: 4px;        /* a focus ring, a small badge */
  --radius-cell: 10px;     /* a calendar day */
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-card: 28px;
  --radius-pill: 999px;

  /* --- metrics ------------------------------------------------------------------ */
  --cell-height: 46px;     /* calendar day cell */
  --cell-gap: 5px;
  --page-width: 390px;     /* the phone the screens were drawn at */
  --page-max: 760px;       /* app screens cap here on desktop */
  --desktop-width: 1280px;
  --desktop-aside: 380px;
  --gutter: 16px;

  /* ⚠️ 44px minimum on anything tappable, 52px on a primary action, 56px on a tab.
   * The calendar is a grid of small targets on a phone and is the whole product. */
  --tap-min: 44px;
  --tap-primary: 52px;
  --tap-tab: 56px;

  --focus-ring: 3px solid var(--ink);
  --focus-offset: 2px;
}

/* Dark: the device's preference, unless the viewer has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f1ebe2;
    --paper: #151311;
    --card: #1f1c19;
    --muted: #a89e92;
    --line: #37322c;
    --on-ink: #5e574d;
    --day-disabled: #544c44;
    /* ⚠️ NOT the designed #8A3B2E. The design README gives ONE error colour for both
     * themes, and on a near-black page it lands at 2.42:1 on paper / 2.22:1 on card —
     * unreadable. This is the same red lifted until it clears AA on both dark surfaces
     * (5.95:1 and 5.44:1). Raised with Tank 26 Sep 2026; the designer may prefer a
     * different red — the only constraint is luminance >= 0.229. */
    --error: #d4796a;
    /* ⚠️ Lifted, for the same reason --error is. #3e6b4a on a near-black surface is about
     * as readable as the original red was. NB --saved has no dark override at all; it is a
     * 4px dot, this is a whole banner. */
    --success: #6fae82;
    --cal-block: transparent;
  --accent-ink: var(--accent);
    --accent-ink: var(--accent);
    --hatch-busy: repeating-linear-gradient(135deg, #3a342e 0 3px, #1f1c19 3px 8px);
    --hatch-booked: repeating-linear-gradient(135deg, #5a5249 0 3px, #2c2824 3px 7px);
    /* The ramp runs dark -> light here, so "most" is already mid-lightness. */
    --on-heat-most: var(--paper);
  }
}

/* An explicit choice from Account always wins, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1ebe2;
  --paper: #151311;
  --card: #1f1c19;
  --muted: #a89e92;
  --line: #37322c;
  --on-ink: #5e574d;
  --day-disabled: #544c44;
  /* ⚠️ NOT the designed #8A3B2E. The design README gives ONE error colour for both
   * themes, and on a near-black page it lands at 2.42:1 on paper / 2.22:1 on card —
   * unreadable. This is the same red lifted until it clears AA on both dark surfaces
   * (5.95:1 and 5.44:1). Raised with Tank 26 Sep 2026; the designer may prefer a
   * different red — the only constraint is luminance >= 0.229. */
  --error: #d4796a;
  --success: #6fae82;
  --cal-block: transparent;
  --accent-ink: var(--accent);
  --hatch-busy: repeating-linear-gradient(135deg, #3a342e 0 3px, #1f1c19 3px 8px);
  --hatch-booked: repeating-linear-gradient(135deg, #5a5249 0 3px, #2c2824 3px 7px);
  /* The ramp runs dark -> light here, so "most" is already mid-lightness. */
  --on-heat-most: var(--paper);
}

/* The APP HEADER lockup: amber tile, "GigRally", a hairline, "BAND".
 *
 * ⚠️ Separate from `.wordmark` below, which is the MARKETING mark and is unchanged. This
 * one only appears once you are inside the product, where saying WHICH product earns its
 * space. The crew app has the same shape in its own colours, in its own stylesheet.
 *
 * ⚠️ `--accent-ink`, never `--accent`, for the "BAND" text. Stage gold on paper is 1.86:1
 * (see the token's own comment); `--accent-ink` is that gold darkened until it clears AA at
 * 4.97:1, and it resolves back to plain accent in dark mode where gold on ink is fine. The
 * word has to be readable, not merely accented.
 */
.app-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.app-lockup__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.app-lockup__rule {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex: 0 0 auto;
}
.app-lockup__sub {
  /* DM Mono, which this app already loads — the crew lockup's IBM Plex Mono would be a
   * fourth font family requested on every band page for one word. */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* On a dark surface the wordmark goes paper, like `.wordmark` does. */
.on-dark .app-lockup__word { color: var(--paper); }

@media (max-width: 400px) {
  /* ⚠️ The header also carries the band switcher and an avatar. At 390px the three
   * together overflow, and the part that can go is the one the rest of the screen already
   * implies. The tile and "GigRally" stay. */
  .app-lockup__rule,
  .app-lockup__sub { display: none; }
}

/* The wordmark. "Gig" is heavy, "Rally" is light — and ⚠️ "Rally" is ink on light
 * backgrounds but stage gold on dark ones, which is a rule about the SURFACE it sits on,
 * not about the theme. A dark card in the light theme (the band tile on Home, the
 * "answered through" bar) takes the gold treatment too. */
.wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}
.wordmark__gig { font-weight: 800; }
.wordmark__rally { font-weight: 400; color: var(--ink); }
.on-dark .wordmark,
.wordmark--on-dark { color: var(--paper); }
.on-dark .wordmark__rally,
.wordmark--on-dark .wordmark__rally { color: var(--accent); }
:root[data-theme="dark"] .wordmark__rally { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark__rally { color: var(--accent); }
}