/* ============================================================
   COLOR — Pavel Presnov Design System
   "Serene" palette: cool sage-tinted neutrals, a calm sage
   accent, and soft semantic hues. Light & airy, premium, quiet.
   Base ramps first, then semantic aliases. Reference the
   SEMANTIC aliases in product code — not the raw ramps.
   ============================================================ */

:root {
  /* ---- Neutral · paper (sage-tinted cool greys, light → fill) ---- */
  --paper-0:   #FFFFFF;
  --paper-50:  #F8FAF8;
  --paper-100: #F1F3F1; /* Mist — page background (brand anchor) */
  --paper-150: #ECEFEC;
  --paper-200: #E7EBE7;
  --paper-300: #DEE3DE; /* Line — hairline border (brand anchor) */
  --paper-400: #C6CDC7;
  --paper-500: #A9B2AA;

  /* ---- Neutral · ink (text, dark → light) ---- */
  --ink-900: #20231F; /* Slate — primary ink (brand anchor) */
  --ink-800: #2E322E;
  --ink-700: #3C413C;
  --ink-600: #4C524D;
  --ink-500: #5C635D; /* secondary text */
  --ink-400: #767E77;
  --ink-300: #889089; /* Moss — muted text (brand anchor) */
  --ink-200: #A6ADA7;

  /* ---- Accent · sage (the one brand color) ---- */
  --sage-50:  #EEF3F1;
  --sage-100: #E2EBE8; /* tint — badges, hover fills */
  --sage-200: #C9D9D4;
  --sage-300: #AECCC4;
  --sage-400: #93B5AC;
  --sage-500: #7DA39B; /* Sage — accent (brand anchor) */
  --sage-600: #5F8A81; /* mid — italic accents, links, hover */
  --sage-700: #3F6A61; /* deep — primary button (brand anchor) */
  --sage-800: #335751;
  --sage-900: #284440;

  /* ---- Semantic hues (soft, desaturated to stay calm) ---- */
  --success-50:  #E9F0EA;  --success-500: #5E8C6A;  --success-700: #3F6A4C;
  --warning-50:  #F4EEDF;  --warning-500: #B8924E;  --warning-700: #8A6B34;
  --danger-50:   #F3E7E4;  --danger-500:  #B46B5F;  --danger-700:  #8A4C42;
  --info-50:     #E7EDF1;  --info-500:    #6A8AA0;  --info-700:    #4A6678;

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

  /* Surfaces */
  --surface-page:        var(--paper-100);
  --surface-card:        var(--paper-0);
  --surface-raised:      var(--paper-0);
  --surface-sunken:      var(--paper-150);
  --surface-fill:        var(--paper-200);
  --surface-fill-hover:  var(--paper-300);
  --surface-inverse:     var(--ink-900);
  --surface-accent:      var(--sage-700);
  --surface-accent-hover:var(--sage-800);
  --surface-accent-soft: var(--sage-100);

  /* Text */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-300);
  --text-on-accent:  var(--paper-50);
  --text-on-inverse: var(--paper-100);
  --text-accent:     var(--sage-700);
  --text-link:       var(--sage-700);

  /* Borders */
  --border-subtle:   var(--paper-200);
  --border-default:  var(--paper-300);
  --border-strong:   var(--paper-400);
  --border-accent:   var(--sage-500);
  --border-inverse:  var(--ink-900);

  /* Focus ring */
  --ring-accent: rgba(125, 163, 155, 0.40);

  /* Semantic surface/text pairs */
  --success-surface: var(--success-50); --success-text: var(--success-700); --success-solid: var(--success-500);
  --warning-surface: var(--warning-50); --warning-text: var(--warning-700); --warning-solid: var(--warning-500);
  --danger-surface:  var(--danger-50);  --danger-text:  var(--danger-700);  --danger-solid:  var(--danger-500);
  --info-surface:    var(--info-50);    --info-text:    var(--info-700);    --info-solid:    var(--info-500);
}