/* =============================================================
   Aula de Música d'EL CASAL DE LLAVANERES — Design Tokens
   Color primari: #C97D5E (terracota de la clau de sol al logo)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600&family=Work+Sans:wght@300;400;500;600;700&family=Caveat:wght@400;500;600&display=swap');

:root {
  /* ========== COLOR PRIMARI DE MARCA ========== */
  /* Terracota extret de la clau de sol del logo (#C97D5E) */
  --brand-clef:       #C97D5E;
  --brand-clef-soft:  #D99B80;
  --brand-clef-deep:  #A66048;
  --brand-clef-pale:  #F2E3D8; /* fons molt suau */

  /* ========== NEUTRALS ========== */
  --ink:        #171717;
  --ink-2:      #2B2B2B;
  --ink-3:      #545454;
  --ink-4:      #7A7A7A;
  --ink-5:      #B5B5B5;

  --paper:      #FFFFFF;
  --paper-warm: #FBF7F3;
  --paper-sand: #F3EEE8;
  --paper-stone:#E9E4DE;

  /* ========== SEMÀNTICS ========== */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-3);
  --fg-3:         var(--ink-4);
  --fg-inverse:   var(--paper);

  --bg-1:         var(--paper);
  --bg-2:         var(--paper-warm);
  --bg-3:         var(--paper-sand);
  --bg-accent:    var(--brand-clef);
  --bg-accent-deep: var(--brand-clef-deep);

  --border-subtle: rgba(23, 23, 23, 0.08);
  --border-strong: rgba(23, 23, 23, 0.18);

  --link:       var(--brand-clef);
  --link-hover: var(--brand-clef-deep);

  /* ========== TIPOGRAFIA ========== */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-script:  'Caveat', cursive;

  /* Escala de tipus — fluida (min · preferred · max) */
  --fs-xs:   clamp(0.72rem, 0.68rem + 0.20vw, 0.78rem);  /* ~11.5–12.5px */
  --fs-sm:   clamp(0.82rem, 0.78rem + 0.25vw, 0.92rem);  /* ~13–15px */
  --fs-base: clamp(0.95rem, 0.90rem + 0.30vw, 1.05rem);  /* ~15–17px */
  --fs-md:   clamp(1.05rem, 0.98rem + 0.40vw, 1.20rem);  /* ~17–19px */
  --fs-lg:   clamp(1.20rem, 1.08rem + 0.60vw, 1.45rem);  /* ~19–23px */
  --fs-xl:   clamp(1.45rem, 1.25rem + 1.00vw, 1.85rem);  /* ~23–30px */
  --fs-2xl:  clamp(1.75rem, 1.40rem + 1.80vw, 2.50rem);  /* ~28–40px */
  --fs-3xl:  clamp(2.10rem, 1.60rem + 2.60vw, 3.25rem);  /* ~34–52px */
  --fs-4xl:  clamp(2.50rem, 1.80rem + 3.60vw, 4.25rem);  /* ~40–68px */
  --fs-5xl:  clamp(3.00rem, 2.00rem + 5.20vw, 5.75rem);  /* ~48–92px */

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.14em;

  /* ========== ESPAIAT ========== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ========== RADIS ========== */
  --radius-0:   0;
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-3:   8px;
  --radius-pill: 999px;

  /* ========== OMBRES ========== */
  --shadow-1: 0 1px 2px rgba(23,23,23,0.06);
  --shadow-2: 0 2px 8px rgba(23,23,23,0.08);
  --shadow-3: 0 8px 24px rgba(23,23,23,0.10);
  --shadow-hover: 0 6px 18px rgba(201,125,94,0.28);

  /* ========== MOVIMENT ========== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ========== LAYOUT ========== */
  --container-max: 1160px;
  --container-pad: clamp(1.5rem, 4vw, 2.5rem);
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }