/* ════════════════════════════════════════════════════════════════════════
   AfterHours — NOCTURNE design tokens
   ────────────────────────────────────────────────────────────────────────
   This is the ONE place to change how the app looks. Every colour, size and
   spacing below has a plain-language note. Change a value, save, refresh the
   preview (index.html) in your browser — the whole app updates.

   These values are mirrored 1:1 into the real Flutter app
   (app/lib/core/tokens.dart). When you change something here, it gets carried
   into the app. So this file IS the design.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLOURS ─────────────────────────────────────────────────────────────
     Colours are written as hex codes (#RRGGBB). Pick new ones with any colour
     picker (e.g. Google "colour picker") and paste the hex here. */

  /* Backgrounds — darkest at the back, one step lighter for cards */
  --bg:        #161826;   /* the app background (deep indigo-black) */
  --surface:   #232532;   /* cards, inputs, the bottom bar */
  --overlay:   #2B2E3E;   /* a slightly lighter panel */

  /* The accent — the app's signature colour. Change this one to re-brand. */
  --accent:    #9184D9;   /* blurple — buttons, links, highlights */
  --accent-hi: #B5ABFC;   /* a lighter version (glow, "Tonight" tag) */
  --accent-2:  #A7A1DB;   /* a second, softer accent ("Open" tag) */

  /* Text */
  --text:      #E9E9ED;   /* main text (near-white) */
  --text-soft: #9397AB;   /* secondary/greyed text (dates, captions) */

  /* Lines & status */
  --divider:   rgba(233,233,237,0.16); /* hairline dividers/borders */
  --danger:    #EF5A76;   /* errors, destructive actions */
  --success:   #66D19E;   /* "checked in", success */

  /* Accent shades (used for tag fills etc. — usually leave as-is) */
  --accent-900:#2B2741; --accent-800:#423A6A; --accent-700:#5D5294;

  /* ── TYPE ────────────────────────────────────────────────────────────────
     The app uses ONE font: Inter. Sizes are in px. */
  --font:      'Inter', system-ui, sans-serif;
  --h1:        28px;   /* big screen titles */
  --h2:        22px;   /* section titles */
  --card-title:17px;   /* event card / card headings */
  --body:      15px;   /* normal text */
  --meta:      13px;   /* dates, secondary text */
  --kicker:    11px;   /* tiny UPPERCASE labels above sections */

  /* ── SHAPE ───────────────────────────────────────────────────────────────
     Corner roundness in px. Bigger = rounder. */
  --radius-sm: 4px;
  --radius:    8px;    /* buttons, inputs, tags */
  --radius-lg: 14px;   /* cards, the ticket frame */

  /* ── SPACING ─────────────────────────────────────────────────────────────
     Gaps and padding. Bigger = more breathing room. */
  --space-2:   6px;
  --space-3:   9px;
  --space-4:   12px;
  --space-6:   17px;
  --space-8:   22px;
}

/* ════════════════════════════════════════════════════════════════════════
   COMPONENTS — built from the tokens above. You rarely need to touch these;
   change the values above and everything here follows.
   ════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font-family: var(--font); font-size: var(--body); line-height: 1.55; }

h1 { font-size: var(--h1); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: var(--h2); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* A kicker: the tiny uppercase accent label above a section */
.kicker { font-size: var(--kicker); letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--accent); }
.muted  { color: var(--text-soft); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       font-family: var(--font); font-weight: 600; font-size: var(--body);
       border: 1px solid transparent; border-radius: var(--radius);
       padding: 14px 18px; cursor: pointer; }
/* Primary = the main action. Filled blurple gradient, white text. */
.btn-primary   { color: #fff; border: 0;
                 background: linear-gradient(135deg, var(--accent-700), var(--accent)); }
/* Secondary = a quieter action. Outlined, no fill. */
.btn-secondary { color: var(--text); background: transparent; border-color: var(--divider); }

/* Tags / chips */
.tag { display: inline-flex; align-items: center; font-size: var(--kicker);
       font-weight: 600; padding: 3px 10px; border-radius: 6px; }
.tag-tonight { background: rgba(145,132,217,0.16); color: var(--accent-hi); }
.tag-open    { background: rgba(167,161,219,0.16); color: var(--accent-2); }

/* Cards */
.card { background: var(--surface); border-radius: var(--radius-lg);
        padding: var(--space-4); }

/* Inputs */
.input { width: 100%; background: var(--surface); color: var(--text);
         border: 1px solid var(--divider); border-radius: var(--radius);
         padding: 11px 12px; font: inherit; font-size: var(--body); }
.input:focus { outline: none; border-color: var(--accent); }
.label { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 5px; }

/* Nocturne signature: a divider line that fades out at both ends */
.hr { height: 1px; border: 0; margin: var(--space-4) 0;
      background: linear-gradient(to right, transparent,
        var(--divider) 40px, var(--divider) calc(100% - 40px), transparent); }