@font-face { font-family: "Forma DJR Display"; src: url("/public/fonts/FormaDJRDisplay-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Forma DJR Display"; src: url("/public/fonts/FormaDJRDisplay-Bold.otf")    format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gelica";            src: url("/public/fonts/Gelica-Regular.otf")           format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gelica";            src: url("/public/fonts/Gelica-Bold.otf")              format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Paleta principal */
  --verde:    #1ED875;
  --lila:     #D4B4FF;
  --amarillo: #FFEA59;
  --negro:    #1D1D1B;
  --blanco:   #FFFFFF;

  /* Neutros */
  --canvas:   #F4F2EC;
  --canvas-2: #EAE7DD;
  --fog:      #E6E2D6;
  --pebble:   #D6D2C6;
  --ash:      #6B6558; /* QW5: enfosquit des de #8C8779 perquè el text petit gris arribi a contrast ≥4.5:1 (només s'usa per a text, no per a vores) */
  --graphite: #4A463C;
  --ink:      var(--negro);

  /* Tints 10% */
  --verde-10:    #DCF5E5;
  --lila-10:     #EFE5FF;
  --amarillo-10: #FFF8D2;

  /* Estat colors semàntics (UI) */
  --status-validat-bg:     #DCF5E5;
  --status-validat-color:  #0E6E3A;
  --status-pendent-bg:     #FFF8D2;
  --status-pendent-color:  #7A6200;
  --status-incomplet-bg:   #FFE5E5;
  --status-incomplet-color:#B91C1C;
  --status-revisio-bg:     #E5F0FF;
  --status-revisio-color:  #1D4ED8;
  --status-cancel-bg:      #EFEFEF;
  --status-cancel-color:   #6B7280;

  /* Tipografia */
  --font-ui:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Forma DJR Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent:  "Gelica", "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipogràfica */
  --t-display: clamp(40px, 5vw, 64px);
  --t-h1:      clamp(28px, 3vw, 40px);
  --t-h2:      clamp(22px, 2.5vw, 32px);
  --t-h3:      20px;
  --t-h4:      16px;
  --t-body:    15px;
  --t-sm:      13px;
  --t-caption: 11px;
  --t-eyebrow: 11px;

  /* Espaciats */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Radis */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 9999px;

  /* Sombres */
  --shadow-xs: 0 1px 2px  rgba(29,29,27,.06);
  --shadow-sm: 0 2px 8px  rgba(29,29,27,.07);
  --shadow-md: 0 4px 24px rgba(29,29,27,.09);

  /* Gradients */
  --debisual-gradient:
    radial-gradient(circle at 18% 20%, #FFEA59 0%, transparent 45%),
    radial-gradient(circle at 82% 22%, #F4B5E8 0%, transparent 50%),
    radial-gradient(circle at 22% 82%, #1ED875 0%, transparent 55%),
    radial-gradient(circle at 80% 78%, #B8D4E8 0%, transparent 50%),
    #D4B4FF;

  /* Motion */
  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      .2s;

  /* Sidebar */
  --sidebar-w: 240px;
  --header-h:  60px;
}