/* ══════════════════════════════════════════════════════════════════════════
   IntaroSport — design tokens (prefix --is-)
   ══════════════════════════════════════════════════════════════════════════
   Singura sursa de adevar pentru culori, tipografie, spatiere, raze, umbre si
   straturi (z-index). Se incarca PRIMUL, inaintea Bootstrap-ului; puntea spre
   variabilele --bs-* sta in components.css, dupa Bootstrap, pentru ca
   Bootstrap isi redeclara :root-ul si ar suprascrie-o.

   Structura:
     1. paleta bruta (navy, gold, slate, semantice, categorii) — valori fixe;
     2. roluri (--is-bg, --is-surface, --is-text…) — CE folosesc componentele.
        Un dark mode viitor redefineste doar rolurile, sub [data-bs-theme=dark];
     3. tipografie, spatiere, raze, umbre, miscare, layout, z-index;
     4. alias-uri vechi (--brand-*, --primary, --accent…) ca paginile existente
        sa mearga neschimbate pana sunt migrate.

   Breakpoint-uri: doar cele Bootstrap (576 / 768 / 992 / 1200 / 1400).
   In @media se scrie max-width: 575.98px | 767.98px | 991.98px | 1199.98px.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── 1. Paleta bruta ─────────────────────────────────────────────────── */
  /* Brand */
  --is-navy-950: #081128;   /* voal foto, hero */
  --is-navy-900: #0b1b45;   /* brand principal: top-bar, footer, titluri */
  --is-navy-800: #13275c;   /* hover pe navy */
  --is-navy-700: #1a3a7a;   /* link, accent pe alb */
  --is-navy-100: #e6eaf3;   /* fundal selectie usor */
  --is-navy-900-rgb: 11, 27, 69;

  --is-gold-500: #EABE33;   /* accent, CTA pe fundal inchis, logo */
  --is-gold-600: #d4a82d;   /* hover pe gold */
  --is-gold-700: #b98900;   /* auriu ca text pe alb (doar text mare) */
  --is-gold-100: #fdf6e0;   /* fundal accent usor */
  --is-gold-500-rgb: 234, 190, 51;

  /* O singura familie de neutre: slate */
  --is-white: #ffffff;
  --is-slate-50:  #f8fafc;
  --is-slate-100: #f1f5f9;
  --is-slate-200: #e2e8f0;
  --is-slate-300: #cbd5e1;
  --is-slate-400: #94a3b8;
  --is-slate-500: #64748b;
  --is-slate-600: #475569;
  --is-slate-700: #334155;
  --is-slate-800: #1e293b;
  --is-slate-950: #0f172a;

  /* Semantice: culoare plina / text tare / fundal / bordura */
  --is-success: #16a34a;  --is-success-strong: #15803d;  --is-success-bg: #dcfce7;  --is-success-border: #bbf7d0;
  --is-warning: #d97706;  --is-warning-strong: #92400e;  --is-warning-bg: #fef3c7;  --is-warning-border: #fde68a;
  --is-danger:  #dc2626;  --is-danger-strong:  #991b1b;  --is-danger-bg:  #fee2e2;  --is-danger-border:  #fecaca;
  --is-info:    #2563eb;  --is-info-strong:    #1e40af;  --is-info-bg:    #dbeafe;  --is-info-border:    #bfdbfe;
  --is-success-hover: #15803d;
  --is-danger-hover:  #b91c1c;

  /* Categorii (nu stari): premium, academie, turneu */
  --is-cat-premium: #6d28d9; --is-cat-premium-bg: #f3e8ff;
  --is-cat-academy: #0e7490; --is-cat-academy-bg: #cffafe;
  --is-cat-tourney: #9d174d; --is-cat-tourney-bg: #fce7f3;

  /* ── 2. Roluri ───────────────────────────────────────────────────────── */
  --is-bg:              #f7f8fa;              /* fundal pagina (valoarea de azi) */
  --is-surface:         var(--is-white);      /* carduri, modale, inputuri */
  --is-surface-muted:   var(--is-slate-100);  /* thead, zone secundare */
  --is-surface-subtle:  var(--is-slate-50);   /* hover rand, zone foarte discrete */
  --is-surface-inverse: var(--is-navy-900);   /* top-bar, footer, rail, hero */
  --is-text:            #111827;              /* text principal */
  --is-text-muted:      var(--is-slate-500);
  --is-text-subtle:     var(--is-slate-400);
  --is-text-inverse:    var(--is-white);
  --is-heading:         var(--is-navy-900);
  --is-border:          #e5e7eb;              /* bordura universala de azi */
  --is-border-strong:   var(--is-slate-300);
  --is-link:            var(--is-navy-700);
  --is-link-hover:      var(--is-navy-900);
  --is-accent:          var(--is-gold-500);
  --is-accent-hover:    var(--is-gold-600);
  --is-on-accent:       var(--is-navy-900);   /* text pe auriu */
  --is-focus-color:     rgba(var(--is-gold-500-rgb), .45);
  --is-focus-ring:      0 0 0 3px var(--is-focus-color);
  --is-backdrop:        rgba(var(--is-navy-900-rgb), .6);

  /* ── 3. Tipografie ───────────────────────────────────────────────────── */
  --is-font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Textul de citit în Figtree; titlurile, meniurile, butoanele în Montserrat. */
  --is-font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --is-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scara fixa 12–44px; 12px e minimul absolut */
  --is-fs-xs:   0.75rem;    /* 12 badge, meta */
  --is-fs-sm:   0.875rem;   /* 14 tabele admin, help (era 13: prea mic pentru text de lucru) */
  --is-fs-base: 0.9375rem;  /* 15 corp admin pe calculator */
  --is-fs-md:   1rem;       /* 16 corp public */
  --is-fs-lg:   1.125rem;   /* 18 lead */
  --is-fs-xl:   1.25rem;    /* 20 titlu card */
  --is-fs-2xl:  1.5rem;     /* 24 titlu pagina admin */
  --is-fs-3xl:  1.875rem;   /* 30 h2 public, hero mobil */
  --is-fs-4xl:  2.25rem;    /* 36 h1 public */
  --is-fs-5xl:  2.75rem;    /* 44 hero desktop */

  --is-fw-regular: 400;
  --is-fw-medium: 500;
  --is-fw-semibold: 600;
  --is-fw-bold: 700;
  --is-fw-black: 800;

  --is-lh-tight: 1.15;
  --is-lh-snug: 1.35;
  --is-lh-base: 1.55;

  /* ── Spatiere: grila de 4px ──────────────────────────────────────────── */
  --is-space-0: 0;
  --is-space-1: 4px;
  --is-space-2: 8px;
  --is-space-3: 12px;
  --is-space-4: 16px;
  --is-space-5: 20px;
  --is-space-6: 24px;
  --is-space-8: 32px;
  --is-space-10: 40px;
  --is-space-12: 48px;
  --is-space-16: 64px;

  /* ── Raze ────────────────────────────────────────────────────────────── */
  --is-radius-xs: 4px;     /* checkbox, chip mic */
  --is-radius-sm: 8px;     /* butoane, inputuri */
  --is-radius-md: 12px;    /* alerte, dropdown, carduri mici */
  --is-radius-lg: 16px;    /* carduri, modale */
  --is-radius-pill: 999px;

  /* ── Umbre: tenta bleumarin ──────────────────────────────────────────── */
  --is-shadow-xs: 0 1px 2px rgba(var(--is-navy-900-rgb), .06);
  --is-shadow-sm: 0 2px 8px rgba(var(--is-navy-900-rgb), .06);
  --is-shadow-md: 0 8px 24px rgba(var(--is-navy-900-rgb), .10);
  --is-shadow-lg: 0 20px 60px rgba(var(--is-navy-900-rgb), .28);
  --is-shadow-fab: 0 4px 12px rgba(var(--is-navy-900-rgb), .30);

  /* ── Miscare ─────────────────────────────────────────────────────────── */
  --is-ease: cubic-bezier(.2, .7, .2, 1);
  --is-dur-fast: 120ms;
  --is-dur: 200ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --is-topbar-h: 70px;
  --is-container: 1200px;
  --is-container-narrow: 760px;
  --is-tap: 44px;                 /* tinta minima de atingere pe mobil */
  --is-bottomnav-h: 64px;         /* meniul de jos pe telefon (fara safe-area) */
  /* Cat ocupa meniul de jos ACUM: 0 cand nu exista; components.css il
     seteaza la --is-bottomnav-h pe telefon, cand meniul e in pagina. */
  --is-bottomnav-offset: 0px;
  --is-safe-bottom: env(safe-area-inset-bottom, 0px);
  --is-fab-size: 56px;
  --is-fab-gap: 12px;
  /* Unde stau elementele plutitoare (chat, bug, promo): deasupra meniului
     de jos si a zonei sigure de pe iPhone */
  --is-fab-bottom: calc(var(--is-bottomnav-offset) + var(--is-safe-bottom) + var(--is-space-4));
  --is-fab-right: var(--is-space-4);

  /* ── z-index: o singura scara, aliniata la Bootstrap ─────────────────── */
  --is-z-raised: 10;            /* sticky in tabele, calendare */
  --is-z-dropdown: 1000;        /* = Bootstrap */
  --is-z-band: 1010;            /* banda Black Friday (sticky sub top-bar) */
  --is-z-topbar: 1020;          /* top-bar, meniul mobil, mega-meniul, meniul de jos */
  --is-z-bottomnav: 1020;
  --is-z-fab: 1030;             /* chat, bug, promo */
  --is-z-banner: 1035;          /* cookie, flash */
  --is-z-drawer: 1045;          /* panou chat deschis, bottom sheet, offcanvas */
  --is-z-modal-backdrop: 1050;  /* = Bootstrap */
  --is-z-modal: 1055;           /* TOATE modalele, inclusiv cele custom */
  --is-z-popover: 1070;
  --is-z-tooltip: 1080;
  --is-z-toast: 1090;
}

/* ── 4. Alias-uri vechi ─────────────────────────────────────────────────
   Numele de mai jos sunt folosite azi in intaro_style.css si in cele 29 de
   blocuri :root din template-uri. Template-urile care isi declara propriul
   :root il vor suprascrie oricum (vin mai tarziu in cascada); alias-urile
   conteaza pentru paginile si componentele care doar CITESC variabilele.
   De eliminat dupa migrare. */
:root {
  /* intaro_style.css */
  --brand-bg: var(--is-navy-900);
  --brand-blue: var(--is-navy-900);
  --brand-text: var(--is-text-inverse);
  --brand-gold: var(--is-gold-500);
  --brand-green: var(--is-success);
  --brand-green-hover: var(--is-success-hover);
  --brand-red: var(--is-danger);
  --brand-red-hover: var(--is-danger-hover);
  --content-bg: var(--is-bg);
  --card-bg: var(--is-surface);
  --text: var(--is-text);
  --muted: var(--is-text-muted);
  --line: var(--is-border);

  /* cele 29 de :root locale (disponibilitate, home, admin/*, premium/*…) */
  --primary: var(--is-navy-900);
  --accent: var(--is-gold-500);
  --green: var(--is-success);
  --red: var(--is-danger);
  --gray: var(--is-slate-500);
  --light: var(--is-slate-50);

  /* academia_adulti.html */
  --navy: var(--is-navy-900);
  --gold: var(--is-gold-500);
  --gold-dk: var(--is-gold-600);

  /* vechiul bloc din <head>-ul _base.html (paleta verde/albastra, retrasa) */
  --intaro-green: var(--is-success);
  --intaro-blue: var(--is-navy-700);
  --intaro-gray: var(--is-slate-50);
}