/* La Danse Royale — color tokens
   Discreet luxury: creams, warm greys, charcoal; slate drawn from the logomark;
   a restrained gilt accent reserved for moments of distinction. */
:root {
  /* Base — creams & warm greys */
  --cream-50:  #FBF9F5;
  --cream-100: #F5F1E9;
  --cream-200: #ECE6DA;
  --stone-300: #D9D3C7;
  --stone-400: #B7B0A3;
  --grey-500:  #8C877D;
  --grey-600:  #6B6760;

  /* Base — charcoal & noir */
  --charcoal-700: #44474F;
  --slate-800:    #3A414D; /* logomark ink */
  --charcoal-900: #24262C;
  --noir-950:     #131418;
  --white:        #FFFFFF;

  /* Base — gilt accent */
  --gilt-300: #D8C7A4;
  --gilt-400: #C6AF85;
  --gilt-500: #A98D58;
  --gilt-600: #8A713F;

  /* Semantic — surfaces */
  --surface-page:    var(--cream-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--cream-100);
  --surface-inset:   var(--cream-200);
  --surface-inverse: var(--noir-950);
  --surface-inverse-raised: #1C1E24;

  /* Semantic — text */
  --text-display:       var(--charcoal-900);
  --text-body:          #3F424A;
  --text-muted:         var(--grey-600);
  --text-faint:         var(--stone-400);
  --text-inverse:       var(--cream-100);
  --text-inverse-muted: rgba(245, 241, 233, 0.64);
  --text-accent:        var(--gilt-600);

  /* Semantic — lines & states */
  --border-hairline:         rgba(36, 38, 44, 0.14);
  --border-hairline-strong:  rgba(36, 38, 44, 0.32);
  --border-hairline-inverse: rgba(245, 241, 233, 0.22);
  --accent:      var(--gilt-500);
  --focus-ring:  var(--slate-800);
  --state-error: #8C4A3E;
  --state-ok:    #5D6B54;

  /* Semantic — shadow */
  --shadow-card:  0 1px 2px rgba(19, 20, 24, 0.05), 0 12px 40px rgba(19, 20, 24, 0.07);
  --shadow-hover: 0 2px 4px rgba(19, 20, 24, 0.06), 0 20px 56px rgba(19, 20, 24, 0.11);
  --protection-gradient: linear-gradient(to top, rgba(19, 20, 24, 0.72), rgba(19, 20, 24, 0)); /* @kind color */
}