/* Riverbank Solutions — design tokens.
   Source: docs/riverbank-style-guide-v1_0.md
   Load order: after Inspinia, before riverbank-tint.css. */

:root {
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-data: 'Inter', 'Plus Jakarta Sans', sans-serif;
  --font-feature-default: "kern" 1, "liga" 1, "calt" 1;
  --font-feature-tabular: "tnum" 1, "kern" 1;

  /* Primary (Red) */
  --color-primary-50:  #fef4f4;
  --color-primary-100: #fcddde;
  --color-primary-200: #fbc6c8;
  --color-primary-300: #f8a4a7;
  --color-primary-400: #f36b71;
  --color-primary-500: #ed1c24;
  --color-primary-600: #c9181f;
  --color-primary-700: #a61419;
  --color-primary-800: #820f14;
  --color-primary-900: #5f0b0e;
  --color-primary-950: #3b0709;

  /* Dark (Charcoal) */
  --color-dark-50:  #f4f4f4;
  --color-dark-100: #deddde;
  --color-dark-200: #c8c7c7;
  --color-dark-300: #a7a5a6;
  --color-dark-400: #706d6e;
  --color-dark-500: #231f20;
  --color-dark-600: #1e1a1b;
  --color-dark-700: #191616;
  --color-dark-800: #131112;
  --color-dark-900: #0e0c0d;
  --color-dark-950: #090808;

  /* Neutral (Grey) */
  --color-neutral-50:  #f8f8f8;
  --color-neutral-100: #e9e9e9;
  --color-neutral-200: #dadada;
  --color-neutral-300: #c4c4c4;
  --color-neutral-400: #9f9f9f;
  --color-neutral-500: #6b6b6b;
  --color-neutral-600: #5b5b5b;
  --color-neutral-700: #4b4b4b;
  --color-neutral-800: #3b3b3b;
  --color-neutral-900: #2b2b2b;
  --color-neutral-950: #1b1b1b;

  --color-white: #ffffff;

  /* Status */
  --color-success-50:  #dcf1e4;
  --color-success-300: #6dd49a;
  --color-success-500: #16a34a;
  --color-success-700: #0d622c;
  --color-warning-50:  #f9ebda;
  --color-warning-300: #f4b96a;
  --color-warning-500: #d97706;
  --color-warning-700: #824704;
  --color-error-50:    #fadede;
  --color-error-300:   #f08080;
  --color-error-500:   #dc2626;
  --color-error-700:   #841717;
  --color-info-50:     #dee8fc;
  --color-info-300:    #7eaaff;
  --color-info-500:    #2563eb;
  --color-info-700:    #163b8d;

  /* Semantic tokens (light mode default) */
  --surface-page:       var(--color-white);
  --surface-subtle:     var(--color-neutral-50);
  --surface-raised:     var(--color-white);
  --surface-overlay:    var(--color-white);
  --surface-sidebar:    var(--color-white);
  --surface-brand:      var(--color-primary-500);
  --surface-brand-tint: var(--color-primary-50);
  --surface-dark:    var(--color-dark-500);
  --surface-inverse: var(--color-dark-500);

  --text-primary:    var(--color-dark-500);
  --text-secondary:  var(--color-neutral-500);
  --text-tertiary:   var(--color-neutral-400);
  --text-disabled:   var(--color-neutral-300);
  --text-inverse:    var(--color-white);
  --text-brand:      var(--color-primary-600);
  --text-link:       var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);
  --text-success:    var(--color-success-700);
  --text-warning:    var(--color-warning-700);
  --text-error:      var(--color-error-700);
  --text-info:       var(--color-info-700);
  --text-inverse-secondary: var(--color-dark-200);

  --border-subtle:  var(--color-neutral-100);
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-400);
  --border-brand:   var(--color-primary-500);
  --border-error:   var(--color-error-500);
  --border-success: var(--color-success-500);

  --interactive-primary-bg:            var(--color-primary-500);
  --interactive-primary-bg-hover:      var(--color-primary-600);
  --interactive-primary-bg-active:     var(--color-primary-700);
  --interactive-primary-bg-disabled:   var(--color-primary-200);
  --interactive-primary-text:          var(--color-white);
  --interactive-primary-text-disabled: var(--color-primary-400);

  --shadow-sm: 0 1px 2px rgba(35,31,32,0.04), 0 1px 3px rgba(35,31,32,0.06);
  --shadow-md: 0 4px 8px -2px rgba(35,31,32,0.06), 0 2px 4px -1px rgba(35,31,32,0.04);
  --shadow-lg: 0 12px 24px -8px rgba(35,31,32,0.08), 0 6px 12px -4px rgba(35,31,32,0.04);
}

/* Semantic tokens — soft dark mode */
[data-theme="dark"] {
  --surface-page:       var(--color-dark-700);
  --surface-subtle:     var(--color-dark-800);
  --surface-raised:     var(--color-dark-600);
  --surface-overlay:    var(--color-dark-500);
  --surface-sidebar:    var(--color-dark-800);
  --surface-brand:      var(--color-primary-600);
  --surface-brand-tint: var(--color-primary-950);
  --surface-dark:    var(--color-dark-900);
  --surface-inverse: var(--color-neutral-50);

  --text-primary:    var(--color-white);
  --text-secondary:  var(--color-dark-300);
  --text-tertiary:   var(--color-dark-400);
  --text-disabled:   var(--color-dark-500);
  --text-inverse:    var(--color-dark-500);
  --text-brand:      var(--color-primary-400);
  --text-link:       var(--color-primary-400);
  --text-link-hover: var(--color-primary-300);
  --text-success:    var(--color-success-300);
  --text-warning:    var(--color-warning-300);
  --text-error:      var(--color-error-300);
  --text-info:       var(--color-info-300);
  --text-inverse-secondary: var(--color-neutral-700);

  --border-subtle:  var(--color-dark-600);
  --border-default: var(--color-dark-500);
  --border-strong:  var(--color-dark-300);
  --border-brand:   var(--color-primary-400);
  --border-error:   var(--color-error-300);
  --border-success: var(--color-success-300);

  --interactive-primary-bg:            var(--color-primary-500);
  --interactive-primary-bg-hover:      var(--color-primary-400);
  --interactive-primary-bg-active:     var(--color-primary-600);
  --interactive-primary-bg-disabled:   var(--color-primary-950);
  --interactive-primary-text:          var(--color-white);
  --interactive-primary-text-disabled: var(--color-dark-400);
}