/*
 * Netti — design tokens.
 * Source: design-system.md (project root of the OneDrive spec folder).
 * This file is the ONLY place visual values live. To re-theme the app,
 * replace this file's values — app.css and templates must never hard-code
 * colors, fonts, spacing or radii.
 */

:root {
  /* Colors */
  --color-graphite: #202020;
  --color-canvas-white: #ffffff;
  --color-ash: #efefef;
  --color-fog: #f5f5f5;
  --color-ivory: #ebe6dd;
  --color-steel: #4d4d4d;
  --color-slate: #828282;
  --color-mist: #e8e8e8;
  --color-ember-orange: #ff682c;
  /* Sport-differentiation accents, shared with the marketing site's
   * palette so app screenshots don't clash next to the marketing pages.
   * Reserved ONLY for telling Tennis and Padel apart at a glance in
   * badges/labels (2026-08-20/21) — general UI (buttons, nav, active
   * states) keeps using --color-accent (orange) regardless of sport. */
  --color-marine: #406b8c; /* Padel — matches marketing site's --accent-1 */
  --color-moss: #306b34;   /* Tennis — matches marketing site's --moss-green */

  /* Semantic roles */
  --color-text: var(--color-graphite);
  --color-text-secondary: var(--color-steel);
  --color-text-muted: var(--color-slate);
  --color-bg: var(--color-canvas-white);
  --color-surface: var(--color-ash);
  --color-surface-alt: var(--color-fog);
  --color-surface-accent: var(--color-ivory);
  /* Own value, not aliased to --color-mist (#e8e8e8) — that pale a gray
     reads as invisible for an actual border against white/Ash surfaces;
     --color-mist stays for its other job (muted text on dark tournament
     backgrounds). επειδή το είπε ο Βασίλης: κάρτες/πεδία πρέπει να
     φαίνονται, όχι απλά να υπάρχουν στο CSS. */
  --color-border: #d6d6d6;
  --color-accent: var(--color-ember-orange);
  --color-accent-tennis: var(--color-moss);
  --color-accent-padel: var(--color-marine);

  /* Typography — Geologica everywhere (headings + body), superseding the
   * design doc's PolySans/Inter pairing. Sofia Sans Condensed 500 is
   * reserved for eyebrows/micro-labels only — the one deliberately
   * different voice for small uppercase tags.
   * Why: επειδή το είπε ο Βασίλης. */
  --font-heading: 'Geologica', sans-serif;
  --font-body: 'Geologica', sans-serif;
  --font-eyebrow: 'Sofia Sans Condensed', sans-serif;

  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-subheading: 18px;
  --leading-subheading: 1.25;
  --text-heading: 32px;
  --leading-heading: 1.19;
  --tracking-heading: -0.64px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -0.8px;
  --text-display: 66px;
  --leading-display: 0.91;
  --tracking-display: -1.32px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing (base 4px) */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-140: 140px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 40px;
  --element-gap: 20px;

  /* Radius */
  --radius-tags: 20px;
  --radius-cards: 8px;
  --radius-buttons: 0px;
  --radius-nav-pills: 200px;
  --radius-asymmetric-card: 6px 0px 0px;
  --radius-data-card: 20px;

  /* App-specific: the asymmetric-card shape scaled up and made the default
   * for every card (not just featured panels, per product decision) — the
   * source token's 6px is calibrated for the design doc's large hero
   * panels and is imperceptible at normal card sizes. Featured content is
   * now told apart by surface color (Ash/Graphite), not shape. */
  --radius-signature: 20px 0px 0px;

  /* Status colors (not part of the visual accent system — used for financial/state badges) */
  --color-success: #2e7d32;
  --color-warning: #b45309;
  --color-danger: #c62828;
  --color-info: #0a549f;
}