/* ============================================================
   THE RAFFLE — DESIGN TOKENS
   Source of truth: /DESIGN.md ("The Raffle — Style Reference").
   This file is a faithful transcription of the DESIGN.md token
   block. Do not add values that are not in DESIGN.md.
   ============================================================ */

/* ── Switzer — local font, display + accent ────────────────── */
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Light.woff2') format('woff2'),
       url('../fonts/Switzer-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Medium.woff2') format('woff2'),
       url('../fonts/Switzer-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
       url('../fonts/Switzer-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-BoldItalic.woff2') format('woff2'),
       url('../fonts/Switzer-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand roles — the tenant's seven ───────────────────────
     THE ONLY BRAND COLOURS IN THE BUILD. These seven are exactly
     what `brandSettings.colors` holds, what the admin API
     validates against an allowlist, and what an operator authors
     under Settings › Brand › Colours. Everything below that does
     brand duty — the palette names, the surfaces, the glass, the
     deck stage — resolves from one of them, so a tenant's brand
     reaches every layout without a stylesheet naming a hue.

     A ROLE IS A JOB, NOT A HUE. `--color-brand-action` is "the
     colour a status mark is filled with"; it happens to be Ember
     on this deployment. Never add an eighth: the seven are the
     stored contract, and a key this file invents is a key no
     tenant record holds.

     THE TRIPLET IS THE ALPHA FORM OF THE HEX BESIDE IT, and the
     one pair in this build a human keeps in step — everywhere the
     record is rendered (js/settings-data.js → brandCssVars, and
     the console's preview) it is DERIVED from the hex. Edit the
     two together, or use the console.

     Neutrals (Obsidian…Snow), the functional status colours and
     the gold foil are NOT brand: a grey reads on any ground, an
     error is not a brand decision, and the foil belongs to the
     collectible object. They stay literal below. The ground a
     section set to DARK is drawn on is its own four (→ Dark
     sections), for the reason stated there. */
  --color-brand-primary:              #002518;
  --color-brand-primary-rgb:          0, 37, 24;
  --color-brand-primary-strong:       #00160F;
  --color-brand-primary-strong-rgb:   0, 22, 15;
  --color-brand-action:               #ff5a00;
  --color-brand-action-rgb:           255, 90, 0;
  --color-brand-highlight:            #D9F9D0;
  --color-brand-highlight-rgb:        217, 249, 208;
  --color-brand-on-highlight:         #005638;
  --color-brand-on-highlight-rgb:     0, 86, 56;
  --color-brand-secondary:            #FDCDFE;
  --color-brand-secondary-rgb:        253, 205, 254;
  --color-brand-on-secondary:         #40001F;
  --color-brand-on-secondary-rgb:     64, 0, 31;

  /* ── Colors ─────────────────────────────────────────────────
     The five with brand duty are the paint tins DESIGN.md names
     THIS deployment's roles by, so each is an alias rather than a
     value: the stylesheets go on reading Deep Forest and Mint,
     and a tenant who is neither still gets their own shop. */
  --color-deep-forest: var(--color-brand-primary-strong);
  --color-race-green: var(--color-brand-primary);
  --color-mint-ice-cream: var(--color-brand-highlight);
  --color-blush-pink: var(--color-brand-secondary);
  --color-parchment: #e0ddd3;
  --color-obsidian: #09090b;
  --color-ink: #18181b;
  --color-graphite: #3f3f46;
  --color-slate: #52525b;
  --color-steel: #71717a;
  --color-ash: #a1a1aa;
  --color-pebble: #d4d4d8;
  --color-fog: #ececee;
  --color-mist: #F8F8F3;
  --color-snow: #ffffff;
  --color-ember: var(--color-brand-action);

  /* ── Typography — font families ─────────────────────────── */
  --font-rg: 'Switzer', 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hatton: 'Switzer', 'Helvetica Neue', ui-sans-serif, sans-serif; /* Bold Italic accent — pairs with Switzer Light (300) base */
  --font-display: var(--font-rg);
  --font-body: var(--font-inter);
  /* Literal code only — embed snippets, attribute names, hex values.
     Never UI text: a reference number is `.ref-text`, not code. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Typography — scale ─────────────────────────────────── */
  --text-caption: 10px;
  --leading-caption: 1;
  --text-body-xs: 12px;
  --leading-body-xs: 1.64;
  --text-body-sm: 13px;
  --leading-body-sm: 1.5;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-md: 15px;
  --leading-body-md: 1.45;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 18px;
  --leading-subheading: 1.45;
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.35;
  --text-heading-md: 24px;
  --leading-heading-md: 1.3;
  --text-heading: 32px;
  --leading-heading: 1.28;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.25;
  --text-display-sm: 56px;
  --leading-display-sm: 1.12;
  --text-display: 64px;
  --leading-display: 1;

  /* ── Typography — tracking ──────────────────────────────────
     TRACKING IS A FUNCTION OF THE SIZE, NOT OF THE FAMILY. A
     letterform's sidebearings are drawn for a reading size; blown
     up to 56px they carry the same proportion of a much larger
     glyph, so a display line set at body tracking reads as though
     the words have come apart — and the same value taken down to an
     18px subheading closes the counters until the word is a texture.
     One number therefore cannot be right everywhere, and -2% was
     being asked to be: it is about right at 32px, visibly loose at
     56, and too tight at 18.
     So there is a rung per step of the scale, tightening as the
     size grows, and a role takes the rung its size sits on. */
  --ls-display: -0.032em;     /* 56–64px — display */
  --ls-heading-lg: -0.026em;  /* 40px */
  --ls-heading: -0.022em;     /* 32px */
  --ls-heading-md: -0.018em;  /* 24px */
  --ls-heading-sm: -0.014em;  /* 20px */
  --ls-subheading: -0.008em;  /* 18px — the last size that still reads as type rather than as a headline */
  /* The family default, for a Switzer role off the ladder. */
  --ls-rg: -0.02em;

  /* ── Typography — weights ────────────────────────────────── */
  --font-weight-light: 300;    /* Switzer Light — base weight for accent-paired headlines */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --weight-display: 700;
  --weight-heading: 600;
  --weight-body: 400;
  --weight-caption: 500;

  /* ── Spacing (base unit 4px, density: compact) ──────────── */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-68: 68px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* ── Layout ─────────────────────────────────────────────── */
  --page-max-width: 1440px;
  --section-gap: 96px;       /* 48px top/bottom per section, stacking to a 96px gap (32/32 → 64px ≤768px) */
  --card-padding: 28px;          /* DESIGN.md: 24-28px — primary cards 28 */
  --card-padding-compact: 24px;  /* DESIGN.md: 24-28px — compact/muted cards 24 */
  --element-gap: 8px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-2xl-2: 16px;
  --radius-3xl: 20px;
  --radius-3xl-2: 24px;
  --radius-3xl-3: 28px;
  --radius-full: 10000px;

  /* Named radii (DESIGN.md "Border Radius" table) */
  --radius-hero: 28px;
  --radius-pill: 10000px;
  --radius-cards: 28px;            /* primary cards */
  --radius-cards-compact: 24px;    /* compact cards */
  --radius-deck-stage: 22px;
  --radius-icons: 32px;
  --radius-badges: 12px;
  --radius-inputs: 14px;
  --radius-buttons: 10000px;       /* pill buttons */
  --radius-buttons-rect: 14px;     /* rounded-rect panel buttons */
  --radius-controls-sm: 10px;      /* small controls (10-12px) */

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-button-flat: none;
  --shadow-card-flat: none;
  --shadow-flat-hairline: rgba(var(--color-brand-primary-rgb), 0.16) 0px 0px 0px 1px;
  --shadow-glass-separator: rgba(var(--color-brand-highlight-rgb), 0.20) 0px 0px 0px 1px inset;

  /* Elevation (DESIGN.md "Elevation" section) */
  --shadow-cta: none;                                /* buttons are flat — no elevation */
  --shadow-deck: 0 28px 90px rgba(0, 0, 0, .36), 0 1px 0 rgba(255, 255, 255, .16) inset;            /* collectible deck objects only */
  --shadow-carousel-active: 0 40px 110px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .24) inset, 0 0 0 1px rgba(255, 255, 255, .08) inset; /* modal card inspection only */
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.22);   /* dialog over wash */

  /* ── Glass ──────────────────────────────────────────────── */
  --glass-border-light: rgba(var(--color-brand-highlight-rgb), 0.24);
  --glass-border-blush: rgba(var(--color-brand-secondary-rgb), 0.42);
  --glass-fill-dark: rgba(255, 255, 255, 0.06);
  --glass-fill-light: rgba(255, 255, 255, 0.64);
  --glass-blur: 18px;

  /* ── Collectible deck tokens ────────────────────────────── */
  --deck-stage-primary: var(--color-race-green);
  --deck-stage-secondary: var(--color-deep-forest);
  --deck-card-paper: var(--color-mint-ice-cream);
  --deck-card-ink: var(--color-race-green);
  --deck-foil-accent: var(--color-blush-pink);
  --deck-glass-border: rgba(var(--color-brand-highlight-rgb), 0.18);
  --deck-glass-fill: rgba(255, 255, 255, 0.06);
  --deck-overlay-wash: rgba(var(--color-brand-primary-strong-rgb), 0.9);
  --ease-deck-out: cubic-bezier(.16, 1, .3, 1);
  --ease-deck-soft: cubic-bezier(.22, .61, .36, 1);

  /* ── Gold foil (golden ticket instant win ONLY) ─────────────
     The one foil colourway outside the brand palette, sanctioned
     the same way the holographic card treatment is: it belongs to
     a collectible object, never to UI chrome. Ink on the foil is
     Race Green, exactly as it is on Mint Ice Cream.
     (DESIGN.md → Golden Ticket Reveal) */
  --gold-foil-highlight: #FFF6CC;
  --gold-foil-light: #F3DC95;
  --gold-foil-mid: #E0B352;
  --gold-foil-deep: #C08A22;
  --gold-foil-ink: var(--color-race-green);
  --gold-foil-glow: rgba(224, 179, 82, 0.34);

  /* ── Motion (DESIGN.md "Motion Philosophy") ─────────────── */
  --ease-spring: cubic-bezier(.175, .885, .32, 1.275); /* entrance animations only */
  /* Something already on screen moving or morphing to a new state —
     a wipe, a slide between two panes. Both ends matter there, so it
     is the one strong ease-in-out; entrances stay on --ease-deck-out. */
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --duration-micro: 0.25s;        /* 0.2–0.35s micro-interactions */
  --duration-deck-fan: 0.82s;
  --duration-deck-image: 1s;
  --duration-carousel: 0.65s;

  /* ── Surfaces ───────────────────────────────────────────── */
  --surface-main-dark: var(--color-brand-primary-strong);
  --surface-brand-card: var(--color-brand-primary);
  --surface-brand-accent: var(--color-brand-highlight);
  --surface-canvas: #F8F8F3;
  --surface-card-white: #ffffff;
  --surface-card-muted: #ececee;
  --surface-dark-surface: var(--color-brand-primary-strong);

  /* ── Dark sections ──────────────────────────────────────────
     What a section SET TO DARK is drawn in. A set of their own,
     deliberately, rather than the brand palette pressed into
     service: a deployment's primary surface and its highlight are
     the colours its shop is branded in, and nothing about either
     says it is dark enough to be a ground or light enough to be
     read on one. The Raffle's own values happen to be Deep Forest
     and Mint, which is why nothing moves on this deployment.

     FOUR ARE SET AND THREE ARE DERIVED. The ground, the headings
     on it, the prose under them and the accent are decisions a
     brand arrives holding, so an operator authors them (Settings ›
     Brand › Dark mode). A hairline, a quieter step of the prose and
     what gets written on the accent are treatments of those four
     rather than decisions of their own, so they are mixed here and
     never asked for.
     ---------------------------------------------------------- */
  --dark-surface: #00160F;
  --dark-heading: #D9F9D0;
  --dark-body:    #98B596;
  --dark-accent:  #FDCDFE;
  --dark-body-quiet: color-mix(in srgb, var(--dark-body) 85%, var(--dark-surface));
  --dark-line:       color-mix(in srgb, var(--dark-heading) 14%, var(--dark-surface));
  /* What is written on the accent. The accent is a chip of light
     ON the ground, so what reads on it is the ground itself —
     which is one fewer colour to ask a brand for, and one that
     cannot be set to something the accent will not carry. */
  --dark-on-accent:  var(--dark-surface);

  /* ── Wireframe structural layout (not visual design) ────── */
  --dev-bar-h: 36px;   /* == css/console.css, so the dev bar is the
                          same object on both sides of the app */
  --nav-h: 56px;
  --sidebar-w: 240px;
  --container-w: var(--page-max-width);
  /* Where a sticky in-page column comes to rest: clear of the fixed
     dev bar and nav, plus a gutter. Content is pushed below the same
     two bars by body padding, so this resolves against the viewport. */
  --sticky-top: calc(var(--dev-bar-h) + var(--nav-h) + var(--spacing-24));

  /* Semantic z-index scale (low → high) */
  --z-sidebar-overlay: 700;
  --z-sidebar: 800;
  --z-action-bar: 880;  /* mobile sticky CTA — over content, under nav/modals */
  --z-nav: 900;
  --z-mobile-menu: 950;
  --z-dev-bar: 1000;
  --z-modal: 1100;
  --z-deck-overlay: 1200;

  /* ── Functional status colors ───────────────────────────────
     Not part of DESIGN.md (which has no semantic status palette).
     Muted to sit quietly inside the neutral system; used ONLY for
     alerts and operational status badges (KYC, payouts, draws). */
  --success: #357153;
  --danger: #b03a3a;
  --warning: #a8731f;
  --info: #4a6c8c;
}