/* =====================================================================
   Den Lille Musikskole - DELTE design-tokens (CRM + UVP)
   Én kilde til sandhed for palet, typografi, rum, radier, skygger og motion.
   Begge flader loader denne FØRST (crmcore/css/app.css hhv. uvp/css/uvp.css
   arver herfra). En token-ændring her slår derfor automatisk igennem BEGGE
   steder - det var tidligere kopieret i hånden (jf. docs/design-system.md).

   Navne-note: CRM og UVP voksede med hvert sit token-vokabular. Begge navnesæt
   bevares her (UVP-navnene peger via var() på de kanoniske CRM-navne, samme
   værdi), så INGEN selektor/klasse i de to app-filer skal røres - de arver bare
   samme værdi. Værdierne er byte-identiske med de to tidligere :root-blokke.
   Eneste bevidste undtagelse: UVP's --muted afviger (lysere) og bor fortsat som
   et lille override i uvp.css.
   ===================================================================== */
:root {
  /* Flader */
  --paper:      #f4efe4;   /* varm ivory-canvas */
  --paper-2:    #ebe4d5;   /* nedsaenket flade */
  --card:       #fffdf8;   /* haevet kort */
  --ink:        #221d17;   /* naesten-sort, varm */
  --ink-2:      #6f6456;   /* sekundaer tekst */
  --ink-3:      #a89c88;   /* stille / tertiaer */
  --line:       #e6ddcc;   /* haarstreg */
  --line-2:     #d7cbb4;   /* staerkere streg */

  /* Accent (persimmon) + semantik */
  --accent:      #c2562e;  /* primaer */
  --accent-deep: #a1431f;  /* hover/tryk + tekst-paa-lys */
  --accent-soft: #f4e2d5;  /* tint */

  /* Status (warm semantik) */
  --ok:       #3c7a57;  --ok-bg:     #e4f0e6;
  --warn:     #9a6a12;  --warn-bg:   #f4e6cf;
  --danger:   #b0432f;  --danger-bg: #f6e2dc;
  --info:     #2f6aa6;  --info-bg:   #e6eef7;
  --muted:    #7a7061;  --muted-bg:  #ebe4d5;
  --gold:     #b98a3e;

  /* Typografi */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing-skala (8pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radier */
  --r-card: 18px; --r-md: 12px; --r-sm: 9px; --r-pill: 999px;
  --radius: 16px;     /* generel afrunding (kort/paneler i app-CSS) */
  --radius-sm: 9px;

  /* Skygger (varme) + fokus-ring */
  --sh-sm: 0 1px 2px rgba(34,29,23,.05), 0 1px 3px rgba(34,29,23,.05);
  --sh-md: 0 2px 8px rgba(34,29,23,.05), 0 10px 30px -8px rgba(34,29,23,.12);
  --sh-lg: 0 18px 50px -12px rgba(34,29,23,.24);
  --ring:  0 0 0 3px rgba(194,86,46,.28);
  --shadow:    var(--sh-md);
  --shadow-sm: var(--sh-sm);

  /* Motion */
  --e-out:    cubic-bezier(.22,.68,.24,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);

  --maxw: 1200px;

  /* --- Bagud-kompatible aliaser (gamle CRM-token-navne) --- */
  --brass:       var(--accent);
  --brass-dark:  var(--accent-deep);
  --brass-soft:  var(--accent-soft);
  --ink-soft:    var(--ink-2);
  --ink-muted:   var(--ink-3);
  --line-strong: var(--line-2);

  /* --- UVP-navnesaet (peger paa de kanoniske CRM-navne, samme vaerdi) --- */
  --display:   var(--font-head);
  --sans:      var(--font-body);
  --green:     var(--ok);      --green-soft: var(--ok-bg);
  --blue:      var(--info);    --blue-soft:  var(--info-bg);
  --red:       var(--danger);  --red-soft:   var(--danger-bg);
  --s1: var(--sp-1); --s2: var(--sp-2); --s3: var(--sp-3); --s4: var(--sp-4);
  --s5: var(--sp-5); --s6: var(--sp-6); --s7: var(--sp-7); --s8: var(--sp-8);
  --shell: var(--maxw);
}