/*
 * T2S Ibérica — Design tokens
 * Font of truth: Figma "Foundations — T2S Ibérica" (node 11:2)
 * Estructura: primitives (neutral, accent) → semantic (bg, text, border).
 * Regla: en components usa SEMPRE els tokens semàntics, no els primitives.
 */

:root {
    /* ------------------------------------------------------------------
     * 01 — Color · Primitives
     * ------------------------------------------------------------------ */

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

    /* Neutral (sense tint) */
    --color-neutral-50:  #f7f7f7;
    --color-neutral-100: #efefef;
    --color-neutral-200: #dcdcdc;
    --color-neutral-300: #bdbdbd;
    --color-neutral-400: #969696;
    --color-neutral-500: #737373;
    --color-neutral-600: #545454;
    --color-neutral-700: #3d3d3d;
    --color-neutral-800: #262626;
    --color-neutral-900: #141414;

    /* Accent (derivat de #B70E0C, pas 600) */
    --color-accent-50:  #fcf5f5;
    --color-accent-100: #f8e7e7;
    --color-accent-200: #efcaca;
    --color-accent-300: #e29f9e;
    --color-accent-400: #d26a68;
    --color-accent-500: #c43938;
    --color-accent-600: #b70e0c; /* Brand */
    --color-accent-700: #9a0c0a; /* Brand hover */
    --color-accent-800: #7c0a08;
    --color-accent-900: #5c0706;

    /* ------------------------------------------------------------------
     * 01 — Color · Semantic (aliases)
     * Contrastes verificats WCAG 2.1 AA/AAA sobre bg/primary #FFFFFF:
     *   text/primary   #141414 → 19.6:1 AAA
     *   text/secondary #545454 →  7.87:1 AAA
     *   text/tertiary  #737373 →  4.83:1 AA
     *   text/brand     #B70E0C →  6.36:1 AA
     *   text/on-brand  #FFFFFF sobre bg/brand #B70E0C → 6.36:1 AA
     * (text/disabled queda exempt per WCAG 1.4.3.)
     * ------------------------------------------------------------------ */

    /* Background */
    --bg-primary:       var(--color-white);
    --bg-secondary:     var(--color-neutral-50);
    --bg-tertiary:      var(--color-neutral-100);
    --bg-inverse:       var(--color-neutral-900);
    --bg-brand:         var(--color-accent-600);
    --bg-brand-hover:   var(--color-accent-700);
    --bg-brand-subtle:  var(--color-accent-50);
    --bg-disabled:      var(--color-neutral-100);

    /* Text */
    --text-primary:     var(--color-neutral-900);
    --text-secondary:   var(--color-neutral-600);
    --text-tertiary:    var(--color-neutral-500);
    --text-brand:       var(--color-accent-600);
    --text-on-brand:    var(--color-white);
    --text-on-inverse:  var(--color-white);
    --text-disabled:    var(--color-neutral-400);

    /* Border */
    --border-primary:   var(--color-neutral-200);
    --border-secondary: var(--color-neutral-300);
    --border-strong:    var(--color-neutral-900);
    --border-brand:     var(--color-accent-600);

    /* Focus ring (WCAG 2.4.7 · 2.4.11) — contrast ≥ 3:1 sobre bg/primary */
    --focus-ring-color:  var(--color-accent-600);
    --focus-ring-width:  2px;
    --focus-ring-offset: 2px;

    /* ------------------------------------------------------------------
     * 02 — Typography
     * Montserrat · sizes en rem (root 16px) perquè escalin amb el
     * font-size de l'usuari (WCAG 1.4.4 Resize text).
     * ------------------------------------------------------------------ */

    --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    /* Font sizes */
    --fs-display-2xl: 4.5rem;    /* 72px */
    --fs-display-xl:  3.75rem;   /* 60px */
    --fs-display-lg:  3rem;      /* 48px */
    --fs-h1:          2.25rem;   /* 36px */
    --fs-h2:          1.875rem;  /* 30px */
    --fs-h3:          1.5rem;    /* 24px */
    --fs-h4:          1.25rem;   /* 20px */
    --fs-body-lg:     1.125rem;  /* 18px */
    --fs-body-md:     1rem;      /* 16px */
    --fs-body-sm:     0.875rem;  /* 14px */
    --fs-label-lg:    1rem;      /* 16px */
    --fs-label-md:    0.875rem;  /* 14px */
    --fs-label-sm:    0.75rem;   /* 12px */
    --fs-overline:    0.75rem;   /* 12px */
    --fs-caption:     0.75rem;   /* 12px */

    /* Line heights (equivalent en rem als px del Figma) */
    --lh-display-2xl: 5.5rem;    /* 88px */
    --lh-display-xl:  4.625rem;  /* 74px */
    --lh-display-lg:  3.75rem;   /* 60px */
    --lh-h1:          2.875rem;  /* 46px */
    --lh-h2:          2.5rem;    /* 40px */
    --lh-h3:          2.125rem;  /* 34px */
    --lh-h4:          1.75rem;   /* 28px */
    --lh-body-lg:     1.875rem;  /* 30px */
    --lh-body-md:     1.625rem;  /* 26px */
    --lh-body-sm:     1.375rem;  /* 22px */
    --lh-label-lg:    1.5rem;    /* 24px */
    --lh-label-md:    1.25rem;   /* 20px */
    --lh-label-sm:    1rem;      /* 16px */
    --lh-overline:    1rem;      /* 16px */
    --lh-caption:     1.125rem;  /* 18px */

    /* Font weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Letter spacing */
    --ls-display: -0.02em;  /* Display/* */
    --ls-heading: -0.01em;  /* H1–H3 */
    --ls-normal:   0;
    --ls-overline: 0.06em;  /* Overline */

    /* ------------------------------------------------------------------
     * 03 — Spacing (base 4px)
     * ------------------------------------------------------------------ */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ------------------------------------------------------------------
     * 03 — Radii
     * ------------------------------------------------------------------ */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   4px;   /* default inputs & buttons */
    --radius-lg:   8px;   /* cards */
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ------------------------------------------------------------------
     * Layout
     * ------------------------------------------------------------------ */
    --container-max: 1440px;
    --container-gutter: var(--space-6);
    --container-gutter-lg: var(--space-12);

    /* Z-index scale */
    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:  200;
    --z-overlay: 800;
    --z-modal:   900;
    --z-toast:  1000;

    /* Motion */
    --motion-fast:  120ms;
    --motion-base:  200ms;
    --motion-slow:  320ms;
    --motion-ease:  cubic-bezier(0.2, 0, 0, 1);
}