/* ================================================================
   VARIABLES.CSS — Joventut Reus 2026
   Design tokens, reset, tipografia global i components globals
   ================================================================

   ÍNDEX
   ─────────────────────────────────────────────────────────────
   1.  DESIGN TOKENS — :root (colors, tipografia, espaciats)
   2.  RESET & BASE
   3.  TIPOGRAFIA GLOBAL
   4.  COMPONENTS GLOBALS
       4.1  Botons
       4.2  Formularis
       4.3  Breadcrumbs
   ─────────────────────────────────────────────────────────────
*/


/* ================================================================
   1. DESIGN TOKENS — :root
      Extrets del Figma: aj.reus - 2026 - web joventut (node 156:6046)
   ================================================================ */

:root {

    /* ----------------------------
     COLORS — paleta Figma
     ---------------------------- */

    --color-black: #000000;
    /* preheader bg, footer bg */
    --color-dark: #1a1a1a;
    /* hero bg, text principal */
    --color-white: #ffffff;
    --color-gray-light: #f2f2f2;
    /* fons secció principal */
    --color-gray-text: #666666;
    /* text secundari / muted */

    /* Accents */
    --color-pink: #ff00a8;
    /* telèfon, email, whatsapp — accent */
    --color-lime: #b4ff00;
    /* secció RRSS bg */
    --color-cyan: #00e5ff;
    /* etiqueta FORMULARI */
    --color-yellow: #ffd60a;
    /* accent auxiliar */

    /* Àlies semàntics */
    --color-bg: var(--color-white);
    --color-bg-section: var(--color-gray-light);
    --color-text: var(--color-dark);
    --color-text-muted: var(--color-gray-text);
    --color-text-inverse: var(--color-white);
    --color-accent: var(--color-pink);

    /* ----------------------------
     TIPOGRAFIA — fonts Figma
     ---------------------------- */

    --font-display: 'Darker Grotesque', sans-serif;
    /* headings / display */
    --font-body: 'Inter', sans-serif;
    /* body / UI */
    --font-ui: 'Open Sans', sans-serif;
    /* preheader / footer petit */

    /* Mides tipogràfiques del Figma (escala real) */
    --fs-ui: 0.875rem;
    /* 14px — preheader nav */
    --fs-sm: 1rem;
    /* 16px — cos text, footer links */
    --fs-md: 1.25rem;
    /* 20px — descripció cards */
    --fs-lg: 1.5rem;
    /* 24px — labels formulari */
    --fs-xl: 2rem;
    /* 32px — subtítol secció */
    --fs-2xl: 3rem;
    /* 48px — títol card / h3 */
    --fs-3xl: 4rem;
    /* 64px — h2 seccions */
    --fs-4xl: 5rem;
    /* 80px — hero quote */
    --fs-display: clamp(4rem, 15vw, 17.25rem);
    /* 64px → 276px a ≥1400px */
    --fs-mega: clamp(6rem, 17vw, 21.25rem);
    /* JOVENTUTREUS (340px) fluid */

    /* Pesos */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 800;
    --fw-black: 900;

    /* Alçades de línia */
    --lh-tight: 0.95;
    --lh-snug: 1.1;
    --lh-base: 1.4;
    --lh-relaxed: 1.6;

    /* ----------------------------
     ESPACIATS — extrets del Figma
     ---------------------------- */

    --sp-1: 0.25rem;
    /*  4px */
    --sp-2: 0.5rem;
    /*  8px */
    --sp-3: 0.75rem;
    /* 12px */
    --sp-4: 1rem;
    /* 16px */
    --sp-5: 1.25rem;
    /* 20px */
    --sp-6: 1.5rem;
    /* 24px */
    --sp-8: 2rem;
    /* 32px */
    --sp-10: 2.5rem;
    /* 40px */
    --sp-12: 3rem;
    /* 48px */
    --sp-14: 3.5rem;
    /* 56px */
    --sp-16: 4rem;
    /* 64px */
    --sp-20: 5rem;
    /* 80px */
    --sp-24: 6rem;
    /* 96px */

    /* Padding seccions (Figma: 32px laterals, 96px inferior) */
    --section-px: var(--sp-8);
    --section-py: var(--sp-8);
    --section-pb-lg: var(--sp-24);

    /* Gap cards (Figma: ~63px) */
    --gap-cards: 3.9375rem;

    /* Gap formulari (Figma: 56px) */
    --gap-form: var(--sp-14);

    /* Padding cards (Figma: 40px) */
    --card-padding: var(--sp-10);
    --card-gap: var(--sp-4);

    /* ----------------------------
     RADIS DE VORA
     ---------------------------- */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ----------------------------
     TRANSICIONS
     ---------------------------- */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* ----------------------------
     Z-INDEX
     ---------------------------- */

    --z-preheader: 200;
    --z-header: 100;
}


/* ================================================================
   2. RESET & BASE
   ================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* ================================================================
   3. TIPOGRAFIA GLOBAL
   ================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    line-height: var(--lh-snug);
    color: var(--color-text);
    letter-spacing: -0.075em;
}

p {
    line-height: var(--lh-relaxed);
}


/* ================================================================
   4. COMPONENTS GLOBALS
   ================================================================ */

/* --- 4.1 Botons --- */

.btn-jov {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-8);
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    line-height: 1;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.btn-jov--dark {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.btn-jov--dark:hover {
    background-color: transparent;
    color: var(--color-dark);
}

.btn-jov--outline {
    background-color: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}

.btn-jov--outline:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* --- 4.2 Formularis ---
   Mogut a joventutreus.css §7.3.1: ha de carregar després del build
   Bootstrap (style.css) perquè .form-field__* guanyi a .form-control. */

/* --- 4.3 Breadcrumbs --- */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--color-gray-text);
    margin-bottom: var(--sp-8);
}

.breadcrumbs__link {
    text-decoration: underline;
}

.breadcrumbs__link:hover {
    color: var(--color-dark);
}

.breadcrumbs span {
    font-weight: var(--fw-bold);
}