/* First Team / Futura Tech — design tokens
   Names are fixed by CONTRACT.md. Palette follows the real logos:
   brand red (#E3141B in the marks), ink black, white. Angular geometry.
   Light is default; dark follows the OS unless [data-theme] forces one. */

:root {
  color-scheme: light dark;

  --brand-red: #E3141B;     /* exact logo red: fills, marks, large shapes */
  --brand-ink: #0A0A0A;     /* logo black */

  --c-bg: #F4F4F5;
  --c-surface: #FFFFFF;
  --c-surface-2: #EAEAEC;
  --c-text: #0A0A0A;
  --c-muted: #55555C;       /* 6.8:1 on bg */
  --c-border: #D4D4D8;
  --c-primary: #CE111A;     /* text-safe brand red: 5.6:1 on white, 5.1:1 on bg */
  --c-primary-contrast: #FFFFFF;
  --c-accent: #0A0A0A;      /* second brand colour: ink */
  --c-node: #E3141B;        /* decorative red for marks/accents */
  --c-success: #1B6B3A;
  --c-warning: #8A5A00;
  --c-danger: #B3261E;

  --c-primary-soft: #FCE8E8;
  --c-warning-soft: #FFF3D6;
  --c-danger-soft: #FBE4E2;
  --c-success-soft: #DDF0E3;
  --c-focus: #0A0A0A;
  --c-invert-bg: #0A0A0A;   /* black bands (as on the First Team logo) */
  --c-invert-text: #FFFFFF;

  /* shape: angular, small radii */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 4px;
  --cut: 14px;              /* size of 45° corner cuts */
  --shadow: 0 1px 0 rgba(10, 10, 10, .06), 0 12px 28px -18px rgba(10, 10, 10, .45);

  /* type */
  --font-ar: "Alexandria", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --font-en: "Alexandria", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-0: .8125rem;
  --fs-1: .9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.3125rem;
  --fs-4: 1.75rem;
  --fs-5: clamp(2rem, 1.2rem + 3.6vw, 3.25rem);
  --fs-6: clamp(2.5rem, 1.4rem + 5.2vw, 4.75rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 72px;
}

/* Futura Tech shares the palette (same logo colours); only small tweaks */
.brand-futura {
  --c-bg: #F6F6F7;
  --c-surface-2: #EDEDEF;
}

/* ---------- dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0E0E10;
    --c-surface: #17171A;
    --c-surface-2: #212125;
    --c-text: #F4F4F5;
    --c-muted: #A1A1A8;
    --c-border: #34343A;
    --c-primary: #FF4D52;
    --c-primary-contrast: #0E0E10;
    --c-accent: #FFFFFF;
    --c-node: #FF3B40;
    --c-success: #6EDB97;
    --c-warning: #F2C14E;
    --c-danger: #FF8A80;
    --c-primary-soft: #3A1416;
    --c-warning-soft: #33290F;
    --c-danger-soft: #3A1A18;
    --c-success-soft: #15321F;
    --c-focus: #FFFFFF;
    --c-invert-bg: #000000;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .8);
  }
  :root:not([data-theme="light"]) .brand-futura { --c-bg: #0E0E10; --c-surface-2: #212125; }
}
:root[data-theme="dark"] {
  --c-bg: #0E0E10;
  --c-surface: #17171A;
  --c-surface-2: #212125;
  --c-text: #F4F4F5;
  --c-muted: #A1A1A8;
  --c-border: #34343A;
  --c-primary: #FF4D52;
  --c-primary-contrast: #0E0E10;
  --c-accent: #FFFFFF;
  --c-node: #FF3B40;
  --c-success: #6EDB97;
  --c-warning: #F2C14E;
  --c-danger: #FF8A80;
  --c-primary-soft: #3A1416;
  --c-warning-soft: #33290F;
  --c-danger-soft: #3A1A18;
  --c-success-soft: #15321F;
  --c-focus: #FFFFFF;
  --c-invert-bg: #000000;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .8);
}
:root[data-theme="dark"] .brand-futura { --c-bg: #0E0E10; --c-surface-2: #212125; }