/* ============================================================
   XC Gradient — Color tokens
   Blaugrana on warm paper. Blau (blue) + Grana (claret) are the
   two brand hues, deepened & slightly muted from Barça's official
   palette so the reference stays subtle. Everything sits on warm
   kraft paper with warm near-black ink.
   ============================================================ */

:root {
  /* ---- Paper (warm kraft grounds, light → lighter) ---- */
  --paper-0: #E3D7BF;   /* deepest kraft — full-bleed sections, footers */
  --paper-1: #EBE1CD;   /* base background — pages, app canvas */
  --paper-2: #F3ECDC;   /* raised surface — cards, panels */
  --paper-3: #FAF5EA;   /* lightest — inputs, popovers, wells */
  --paper-inset: #E0D4BB; /* recessed wells, track backgrounds */

  /* ---- Ink (warm near-black → faint) ---- */
  --ink-0: #17130E;     /* display / headlines */
  --ink-1: #2B2419;     /* body text */
  --ink-2: #6A5F4C;     /* secondary / captions */
  --ink-3: #998C72;     /* placeholder / disabled */
  --ink-on-dark: #F5EEDF; /* text on blau/grana/ink surfaces */

  /* ---- Hairlines & dividers ---- */
  --line-1: rgba(23, 19, 14, 0.12);  /* default hairline */
  --line-2: rgba(23, 19, 14, 0.20);  /* stronger divider */
  --line-3: rgba(23, 19, 14, 0.32);  /* input borders, emphasis */
  --line-on-dark: rgba(245, 238, 223, 0.20);

  /* ---- Blau (Barça blue, refined deep navy) ---- */
  --blau-700: #0D2647;  /* pressed */
  --blau-600: #103257;  /* hover */
  --blau:     #143A6B;  /* PRIMARY brand blue */
  --blau-400: #2A63A6;  /* bright accent, links on paper */
  --blau-300: #5E8BC4;  /* subtle accent, focus rings */
  --blau-tint: #DCE4EE; /* tinted fill on paper */

  /* ---- Grana (Barça claret, deep red) ---- */
  --grana-700: #4E1122; /* pressed */
  --grana-600: #661730; /* hover */
  --grana:     #7E1E3C; /* SECONDARY brand claret */
  --grana-400: #A8264C; /* bright accent */
  --grana-300: #C56A85; /* subtle accent */
  --grana-tint: #EEDCE1;/* tinted fill on paper */

  /* ---- Gold (crest / vintage ochre, tertiary accent) ---- */
  --gold-600: #8F6820;
  --gold:     #B6862F;
  --gold-400: #CE9E3F;
  --gold-tint: #EEE3C8;

  /* ---- Semantic status (naturalist, muted) ---- */
  --success:   #4C6B3C;  /* moss */
  --success-tint: #DFE6D3;
  --warning:   #B6862F;  /* ochre (= gold) */
  --warning-tint: #EEE3C8;
  --danger:    #A8264C;  /* claret bright (= grana-400) */
  --danger-tint: #EEDCE1;
  --info:      #2A63A6;  /* blau bright */
  --info-tint: #DCE4EE;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Surfaces */
  --bg-page: var(--paper-1);
  --bg-sunk: var(--paper-inset);
  --surface-card: var(--paper-2);
  --surface-raised: var(--paper-3);
  --surface-input: var(--paper-3);
  --surface-inverse: var(--ink-0);
  --surface-brand: var(--blau);
  --surface-brand-alt: var(--grana);

  /* Text */
  --text-heading: var(--ink-0);
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-inverse: var(--ink-on-dark);
  --text-link: var(--blau-400);
  --text-brand: var(--blau);
  --text-brand-alt: var(--grana);

  /* Borders */
  --border-hairline: var(--line-1);
  --border-default: var(--line-2);
  --border-strong: var(--line-3);
  --border-brand: var(--blau);
  --focus-ring: var(--blau-400);
}