/* ==========================================================================
   T2S — Design system (v2). Estructurat en 3 capes, seguint la convenció
   de sistemes moderns (Untitled UI, Radix, Tailwind):

     1. PRIMITIVES  — valors bruts (color-100..950, sp-*, radius-*, shadow-*)
     2. SEMANTIC    — àlies per intenció (fg/bg/border, brand, error…)
     3. COMPAT      — noms antics --t2s-* que la resta del tema ja usa
                      (header.css, home.css, footer.css, product.css)

   Tota la tipografia és Montserrat (assets/fonts/, self-hosted).
   Paleta base: blanc/negre + accent rojo T2S #c1140f + hi-vis #e9ff2f.
   ========================================================================== */

:root {

    /* ══════════════════════════════════════════════════════════════════════
       1) PRIMITIVES
       ══════════════════════════════════════════════════════════════════════ */

    /* Base */
    --white: #ffffff;
    --black: #000000;

    /* Neutre modern (mateix hue que gray de Radix/Untitled UI) */
    --gray-25:  #fcfcfd;
    --gray-50:  #f9fafb;
    --gray-100: #f2f4f7;
    --gray-200: #eaecf0;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;
    --gray-950: #0c111d;

    /* Brand (rojo T2S) — escala completa 25→950 al voltant de #c1140f */
    --brand-25:  #fff9f9;
    --brand-50:  #fff1f0;
    --brand-100: #ffe0de;
    --brand-200: #ffc0bc;
    --brand-300: #ff8a83;
    --brand-400: #f04d43;
    --brand-500: #c1140f;   /* ← rojo T2S base */
    --brand-600: #a01110;
    --brand-700: #7f0d0e;
    --brand-800: #5f0a0b;
    --brand-900: #3f0708;
    --brand-950: #2a0405;

    /* Accent secundari — hi-vis (color del producte T2S, ús puntual) */
    --hv-500:    #e9ff2f;

    /* Utility (feedback) */
    --success-50:  #ecfdf3;
    --success-500: #17b26a;
    --success-700: #067647;

    --warning-50:  #fffaeb;
    --warning-500: #f79009;
    --warning-700: #b54708;

    --error-50:    #fef3f2;
    --error-500:   #f04438;
    --error-700:   #b42318;

    /* ── Tipografia ────────────────────────────────────────────────────── */
    --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-heavy:    800;   /* fallback al 700 al navegador si no hi ha fitxer */

    /* Escala tipogràfica (Untitled UI style) */
    --text-xs:      12px;
    --text-sm:      14px;
    --text-md:      16px;
    --text-lg:      18px;
    --text-xl:      20px;
    --display-xs:   24px;
    --display-sm:   30px;
    --display-md:   36px;
    --display-lg:   48px;
    --display-xl:   60px;
    --display-2xl:  72px;

    --lh-xs:        18px;
    --lh-sm:        20px;
    --lh-md:        24px;
    --lh-lg:        28px;
    --lh-xl:        30px;
    --lh-display-xs:  32px;
    --lh-display-sm:  38px;
    --lh-display-md:  44px;
    --lh-display-lg:  60px;
    --lh-display-xl:  72px;
    --lh-display-2xl: 90px;

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.01em;
    --tracking-normal:  0em;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.06em;
    --tracking-widest:  0.12em;

    /* ── Spacing (base 4px, Untitled UI) ───────────────────────────────── */
    --sp-0:    0;
    --sp-0-5:  2px;
    --sp-1:    4px;
    --sp-1-5:  6px;
    --sp-2:    8px;
    --sp-3:    12px;
    --sp-4:    16px;
    --sp-5:    20px;
    --sp-6:    24px;
    --sp-8:    32px;
    --sp-10:   40px;
    --sp-12:   48px;
    --sp-16:   64px;
    --sp-20:   80px;
    --sp-24:   96px;
    --sp-32:   128px;
    --sp-40:   160px;

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-none: 0;
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm:  0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
    --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
    --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
    /* Ombra específica del mega-menú (spec Brilliant) */
    --shadow-mega: 0 12px 32px 0 rgba(29, 29, 29, 0.50);

    /* ── Focus ring (accessibilitat) ───────────────────────────────────── */
    --ring-brand:  0 0 0 4px rgba(193, 20, 15, 0.20);
    --ring-gray:   0 0 0 4px rgba(152, 162, 179, 0.20);

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container-max: 1560px;
    --container-pad: 40px;

    /* ── Motion ────────────────────────────────────────────────────────── */
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;

    /* Z-index scale */
    --z-below:   -1;
    --z-base:     0;
    --z-nav:     50;
    --z-drop:   200;
    --z-modal:  400;
    --z-toast:  600;


    /* ══════════════════════════════════════════════════════════════════════
       2) SEMANTIC  — intenció > valor. Usar aquests noms als components.
       ══════════════════════════════════════════════════════════════════════ */

    /* Foreground (text i icones) */
    --fg-primary:       var(--gray-900);
    --fg-secondary:     var(--gray-700);
    --fg-tertiary:      var(--gray-500);
    --fg-quaternary:    var(--gray-400);
    --fg-disabled:      var(--gray-300);
    --fg-brand:         var(--brand-500);
    --fg-brand-hover:   var(--brand-600);
    --fg-error:         var(--error-500);
    --fg-warning:       var(--warning-700);
    --fg-success:       var(--success-700);
    --fg-on-brand:      var(--white);
    --fg-on-dark:       var(--white);
    --fg-inverted:      var(--white);

    /* Background */
    --bg-primary:       var(--white);
    --bg-secondary:     var(--gray-50);
    --bg-tertiary:      var(--gray-100);
    --bg-quaternary:    var(--gray-200);
    --bg-inverted:      var(--gray-900);
    --bg-dark:          var(--gray-950);
    --bg-brand:         var(--brand-500);
    --bg-brand-hover:   var(--brand-600);
    --bg-brand-subtle:  var(--brand-50);
    --bg-error:         var(--error-500);
    --bg-error-subtle:  var(--error-50);

    /* Borders */
    --border-primary:   var(--gray-300);
    --border-secondary: var(--gray-200);
    --border-tertiary:  var(--gray-100);
    --border-brand:     var(--brand-500);
    --border-error:     var(--error-500);
    --border-inverted:  var(--gray-800);

    /* Interactive states */
    --state-hover-bg:   var(--gray-50);
    --state-active-bg:  var(--gray-100);


    /* ══════════════════════════════════════════════════════════════════════
       3) COMPAT — mapatge amb els noms antics --t2s-* que la resta del tema
                   ja utilitza. Així no cal tocar header.css, home.css,
                   footer.css ni product.css.
       ══════════════════════════════════════════════════════════════════════ */

    --t2s-bg:            var(--bg-primary);
    --t2s-bg-alt:        var(--bg-secondary);
    --t2s-bg-dark:       var(--bg-dark);
    --t2s-fg:            var(--fg-primary);
    --t2s-fg-body:       var(--fg-secondary);
    --t2s-fg-muted:      var(--fg-tertiary);
    --t2s-fg-on-dark:    var(--fg-on-dark);
    --t2s-muted-on-dark: var(--gray-400);
    --t2s-line:          var(--border-secondary);
    --t2s-line-dark:     var(--border-inverted);

    --t2s-accent:        var(--brand-500);
    --t2s-accent-2:      var(--brand-600);
    --t2s-accent-ink:    var(--white);
    --t2s-accent-bright: var(--brand-400);
    --t2s-hv:            var(--hv-500);

    --t2s-font-head: var(--font-display);
    --t2s-font-body: var(--font-body);

    /* Escala fluida original (es manté per compat) */
    --t2s-fs-display: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);   /* 32→44 */
    --t2s-fs-h2:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);   /* 24→32 */
    --t2s-fs-h3:      var(--text-lg);
    --t2s-fs-body:    var(--text-md);
    --t2s-fs-small:   var(--text-sm);
    --t2s-fs-eyebrow: var(--text-xs);

    --t2s-fw-body: var(--fw-regular);
    --t2s-fw-med:  var(--fw-semibold);
    --t2s-fw-bold: var(--fw-bold);

    --t2s-lh-tight: 1.1;
    --t2s-lh-head:  1.2;
    --t2s-lh-snug:  1.35;
    --t2s-lh-body:  1.6;

    --t2s-s-1: var(--sp-1);
    --t2s-s-2: var(--sp-2);
    --t2s-s-3: var(--sp-3);
    --t2s-s-4: var(--sp-4);
    --t2s-s-5: var(--sp-6);
    --t2s-s-6: var(--sp-10);
    --t2s-s-7: var(--sp-16);
    --t2s-s-8: var(--sp-24);

    --t2s-container: var(--container-max);
    --t2s-section-y: var(--sp-24);

    --t2s-r-0: var(--radius-none);
    --t2s-r-1: var(--radius-xs);

    --t2s-ease: var(--ease-out);
    --t2s-dur:  var(--duration-base);
}

@media (max-width: 800px) {
    :root { --t2s-section-y: var(--sp-20); }
}