/* LNKS Luanda Music Group: every design token lives in this one file.
   Components and pages use these custom properties only, never raw hex.
   The image placeholder generator (lnks/lib/helpers.php) reads --brand-graphite and --brand-red from here.

   Colours follow the official LNKS logo (October 2026): logo black #0A0A0A, logo red #DE0412, logo deep red #900A0C,
   white #FFFFFF, with tints and shades of the logo red for small text and neutral greys for surfaces.

   Contrast (WCAG 2.x), measured:
     black    #0A0A0A on white #FFFFFF      19.8 : 1
     red-ink  #C40410 on white #FFFFFF       6.2 : 1   small text, links, buttons
     white    #FFFFFF on red #DE0412         5.1 : 1
     red-glow #EF848B on black #0A0A0A       7.9 : 1   red text in dark mode
     muted    #545454 on white               7.6 : 1
     muted    #B3B3B3 on black               9.4 : 1 */

/* One family everywhere. To use a licensed Dazzed later: add its @font-face here and put it first in --font-brand. */
@font-face { font-family: "Figtree Variable"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree Variable"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(../fonts/figtree-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;

  /* brand palette (the only raw colours in the site) */
  --brand-graphite: #0A0A0A;
  --brand-graphite-deep: #050505;
  --brand-red: #DE0412;
  --brand-red-ink: #C40410;
  --brand-red-ink-deep: #900A0C;
  --brand-red-glow: #EF848B;
  --brand-white: #FFFFFF;

  /* font: ONE token. Figtree (OFL) stands in for Dazzed; a licensed Dazzed goes first in this list */
  --font-brand: "Figtree Variable", Figtree;
  --font-sans: var(--font-brand), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --weight-display: 700;
  --tracking-display: -0.01em;
  --tracking-wide: 0.3em;

  /* type scale, measured from the reference at a 1869px viewport: --text-{step}-size / -line / -weight / -tracking */
  --text-xs-size: 12px;
  --text-xs-line: 16px;
  --text-xs-weight: 600;
  --text-xs-tracking: 0.08em;
  --text-sm-size: 14px;
  --text-sm-line: 22px;
  --text-sm-weight: 400;
  --text-base-size: 16px;
  --text-base-line: 26px;
  --text-base-weight: 400;
  --text-nav-size: 17px;
  --text-nav-line: 22px;
  --text-nav-weight: 600;
  --text-nav-tracking: 0.44px;
  --text-lg-size: 20px;
  --text-lg-line: 30px;
  --text-lg-weight: 400;
  --text-xl-size: 28px;
  --text-xl-line: 32px;
  --text-2xl-size: clamp(30px, 2.3vw, 44px);
  --text-2xl-line: 1.05;
  --text-display-size: clamp(44px, 6.4vw, 120px);
  --text-display-line: 0.86;
  --text-mega-size: clamp(64px, 9.6vw, 190px);
  --text-mega-line: 0.82;
  --text-statement-size: clamp(24px, 2.4vw, 45px);
  --text-statement-line: 1.2;
  --text-band-size: clamp(24px, 1.6vw, 30px);
  --text-split-size: clamp(26px, 2.3vw, 43px);
  --text-split-line: 1.1;
  --text-tile-size: clamp(16px, 1.3vw, 22px);
  --text-tile-line: 1;

  /* spacing: --space-0 ... --space-10 */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* radius, slant, shadow */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --slant-tag: 0px;
  --toggle-w: 76px;
  --toggle-h: 38px;
  --shadow-pop: 0 16px 40px rgba(0,0,0,.28);
  --shadow-header: 0 1px 0 rgba(0,0,0,.08);

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 480ms;
  --motion-circle: 420ms;
  --motion-marquee: 48s;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --motion-ease-in-out: cubic-bezier(.65,0,.35,1);

  /* layout */
  --layout-max: 1440px;
  --layout-text: 740px;
  --gutter: 16px;
  --header-h: 68px;
  --header-pad-x: 16px;
  --band-h: clamp(50px, 4vw, 75px);
  --strip-h: clamp(180px, 20vw, 375px);
  --split-max: 1140px;
  --roster-bar-h: 64px;
  --roster-cols: 1;

  /* z-index */
  --z-header: 50;
  --z-roster-bar: 40;
  --z-overlay: 100;
  --z-toast: 110;

  /* roster grid and portraits: graphite in both themes */
  --roster-tile-bg: var(--brand-graphite-deep);
  --roster-name: var(--brand-white);
  --roster-scrim: var(--brand-graphite-deep);
  --roster-link: var(--brand-white);
  --roster-bar-bg: var(--brand-graphite-deep);
  --roster-bar-line: #202020;
  --roster-bar-hover: #111111;
  --roster-rail: var(--brand-white);
  --roster-rail-disabled: #878787;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 88px; --header-pad-x: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --header-h: 114px; --header-pad-x: 40px; }
}
@media (min-width: 480px) { :root { --roster-cols: 2; } }
@media (min-width: 768px) { :root { --roster-cols: 3; } }
@media (min-width: 1024px) { :root { --roster-cols: 4; } }
@media (min-width: 1280px) { :root { --roster-cols: 5; } }

/* light theme (default) */
:root, [data-theme="light"] {
  --c-bg: var(--brand-white);
  --c-surface: #F0F0F0;
  --c-surface-2: #E5E5E5;
  --c-border: #D9D9D9;
  --c-border-input: #6F6F6F;
  --c-text: var(--brand-graphite);
  --c-text-muted: #545454;
  --c-brand: var(--brand-graphite);
  --c-on-brand: var(--brand-white);
  --c-on-brand-muted: #B3B3B3;
  --c-accent: var(--brand-red);          /* big blocks, marquees, bold large type */
  --c-on-accent: #FFFFFF;
  --c-button: var(--brand-red-ink);      /* filled buttons with small labels */
  --c-button-hover: var(--brand-red-ink-deep);
  --c-on-button: #FFFFFF;
  --c-accent-text: var(--brand-red-ink); /* small red text and links */
  --c-accent-on-brand: var(--brand-red-glow);
  --c-tag: var(--brand-graphite);
  --c-on-tag: var(--brand-white);
  --c-panel: var(--brand-red-ink);       /* panels that carry small text */
  --c-on-panel: #FFFFFF;
  --c-focus: var(--brand-red-ink);
  --c-danger: #B42318;
  --c-danger-surface: #FDE8E7;
  --c-success: #1F7A4D;
  --c-success-surface: #E6F4EC;
  --c-note: #FCE9EA;
  --c-on-note: var(--brand-graphite);
}

/* dark theme: follows the system unless the visitor picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: var(--brand-graphite);
    --c-surface: #111111;
    --c-surface-2: #1A1A1A;
    --c-border: #272727;
    --c-border-input: #949494;
    --c-text: var(--brand-white);
    --c-text-muted: #B3B3B3;
    --c-brand: var(--brand-graphite-deep);
    --c-on-brand: var(--brand-white);
    --c-on-brand-muted: #B3B3B3;
    --c-accent: var(--brand-red);
    --c-on-accent: #FFFFFF;
    --c-button: var(--brand-red-ink);
    --c-button-hover: var(--brand-red-ink-deep);
    --c-on-button: #FFFFFF;
    --c-accent-text: var(--brand-red-glow);
    --c-accent-on-brand: var(--brand-red-glow);
    --c-tag: var(--brand-white);
    --c-on-tag: var(--brand-graphite);
    --c-panel: var(--brand-red-ink);
    --c-on-panel: #FFFFFF;
    --c-focus: var(--brand-red-glow);
    --c-danger: #FF8A80;
    --c-danger-surface: #3A1A1C;
    --c-success: #4ADE80;
    --c-success-surface: #0B2416;
    --c-note: #421F20;
    --c-on-note: var(--brand-white);
  }
}
[data-theme="dark"] {
  --c-bg: var(--brand-graphite);
  --c-surface: #111111;
  --c-surface-2: #1A1A1A;
  --c-border: #272727;
  --c-border-input: #949494;
  --c-text: var(--brand-white);
  --c-text-muted: #B3B3B3;
  --c-brand: var(--brand-graphite-deep);
  --c-on-brand: var(--brand-white);
  --c-on-brand-muted: #B3B3B3;
  --c-accent: var(--brand-red);
  --c-on-accent: #FFFFFF;
  --c-button: var(--brand-red-ink);
  --c-button-hover: var(--brand-red-ink-deep);
  --c-on-button: #FFFFFF;
  --c-accent-text: var(--brand-red-glow);
  --c-accent-on-brand: var(--brand-red-glow);
  --c-tag: var(--brand-white);
  --c-on-tag: var(--brand-graphite);
  --c-panel: var(--brand-red-ink);
  --c-on-panel: #FFFFFF;
  --c-focus: var(--brand-red-glow);
  --c-danger: #FF8A80;
  --c-danger-surface: #3A1A1C;
  --c-success: #4ADE80;
  --c-success-surface: #0B2416;
  --c-note: #421F20;
  --c-on-note: var(--brand-white);
}

/* reduced motion: everything that moves becomes instant or stops */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
    --motion-circle: 0.01ms;
    --motion-marquee: 0s;
  }
}