/* ==========================================================================
   COLORS — Ronny Nordelo Design System
   Primary: #07497f (deep navy — steel-plate blue)
   Palette built to support strong skeuomorphic surfaces (embossed, glossy,
   inset) laid over an otherwise minimal, quiet neutral field.
   ========================================================================== */

:root {
  /* ---- Primary (navy) scale ---- */
  --primary-50:  #eef4f9;
  --primary-100: #d6e5f0;
  --primary-200: #adc9e1;
  --primary-300: #7ea9cd;
  --primary-400: #4a83b0;
  --primary-500: #1f6294;
  --primary-600: #0c507f;
  --primary-700: #07497f; /* brand primary */
  --primary-800: #063963;
  --primary-900: #052a49;
  --primary-950: #031a2e;

  /* ---- Neutral (brushed-steel gray, slightly cool) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f9;
  --neutral-100: #eceef1;
  --neutral-150: #e2e5e9;
  --neutral-200: #d3d7dd;
  --neutral-300: #b7bec7;
  --neutral-400: #949fab;
  --neutral-500: #717c89;
  --neutral-600: #565f6b;
  --neutral-700: #3f4650;
  --neutral-800: #2a2f37;
  --neutral-850: #20242b;
  --neutral-900: #171a1f;
  --neutral-950: #0d0f13;
  --neutral-1000: #07080a;

  /* ---- Semantic accents ---- */
  --success-500: #1c8a5c;
  --success-700: #0f6a44;
  --warning-500: #c17d16;
  --warning-700: #935c0e;
  --danger-500:  #c2402f;
  --danger-700:  #942e21;
  --info-500:    #1f6294;
  --info-700:    #07497f;

  /* ---- Light-mode semantic surface aliases ---- */
  --bg-canvas:        var(--neutral-50);
  --bg-canvas-recessed: var(--neutral-100);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-primary:  var(--primary-700);
  --surface-primary-hover: var(--primary-600);
  --surface-primary-press: var(--primary-800);

  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-tertiary:    var(--neutral-500);
  --text-on-primary:  var(--neutral-0);
  --text-link:        var(--primary-700);
  --text-link-hover:  var(--primary-600);

  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-500);

  /* bevel duotone: light catches top-left, shadow pools bottom-right */
  --bevel-highlight:  rgba(255,255,255,0.9);
  --bevel-shadow:     rgba(7, 15, 25, 0.28);
  --bevel-highlight-soft: rgba(255,255,255,0.55);

  --focus-ring: var(--primary-400);
  --shadow-lift: var(--shadow-soft);
}

/* ---- Dark mode ---- */
[data-theme="dark"] {
  --bg-canvas:         var(--neutral-950);
  --bg-canvas-recessed: var(--neutral-1000);
  --surface-card:      var(--neutral-850);
  --surface-raised:    var(--neutral-800);
  --surface-sunken:    var(--neutral-950);
  --surface-primary:   var(--primary-500);
  --surface-primary-hover: var(--primary-400);
  --surface-primary-press: var(--primary-700);

  --text-primary:      var(--neutral-50);
  --text-secondary:    var(--neutral-300);
  --text-tertiary:     var(--neutral-400);
  --text-on-primary:   var(--neutral-0);
  --text-link:         var(--primary-300);
  --text-link-hover:   var(--primary-200);

  --border-subtle:     var(--neutral-800);
  --border-default:    var(--neutral-700);
  --border-strong:     var(--neutral-500);

  --bevel-highlight:   rgba(255,255,255,0.08);
  --bevel-shadow:      rgba(0,0,0,0.65);
  --bevel-highlight-soft: rgba(255,255,255,0.05);

  --focus-ring: var(--primary-300);
  --shadow-lift: var(--shadow-soft-dark);
}