/* NOLAVISION — color tokens
   Palette rationale: warm stone/plaster neutrals (Provençal render & limestone),
   an ink-black for authority/premium trades, copper-amber for energy/solar,
   and a deep petrol green for "maison"/security/eco systems.
   Built in oklch for perceptual consistency; hex fallback not needed (modern browsers only). */

:root {
  /* ---- Base ramps ---- */
  --stone-50:  oklch(98.2% 0.006 90);
  --stone-100: oklch(96.3% 0.010 88);
  --stone-200: oklch(92.5% 0.015 85);
  --stone-300: oklch(86.5% 0.020 80);
  --stone-400: oklch(74% 0.022 75);
  --stone-500: oklch(60% 0.020 70);
  --stone-600: oklch(48% 0.018 65);
  --stone-700: oklch(37% 0.016 60);
  --stone-800: oklch(27% 0.014 55);
  --stone-900: oklch(19% 0.012 50);
  --stone-950: oklch(13.5% 0.010 50);

  --copper-100: oklch(93% 0.045 65);
  --copper-200: oklch(87% 0.07 60);
  --copper-300: oklch(78% 0.10 55);
  --copper-400: oklch(69% 0.125 50);
  --copper-500: oklch(60% 0.135 45);
  --copper-600: oklch(51% 0.125 42);
  --copper-700: oklch(42% 0.105 40);

  --petrol-100: oklch(92% 0.035 175);
  --petrol-200: oklch(83% 0.05 172);
  --petrol-300: oklch(70% 0.06 170);
  --petrol-400: oklch(55% 0.06 168);
  --petrol-500: oklch(42% 0.055 165);
  --petrol-600: oklch(33% 0.048 163);
  --petrol-700: oklch(25% 0.04 160);

  --ink-900: oklch(16% 0.010 55);
  --ink-950: oklch(11% 0.008 55);

  /* ---- Semantic: surfaces ---- */
  --surface-page:      var(--stone-50);
  --surface-canvas:    var(--stone-100);
  --surface-card:      #ffffff;
  --surface-card-alt:  var(--stone-100);
  --surface-inverse:   var(--ink-950);
  --surface-sunken:    var(--stone-200);
  --surface-overlay:   oklch(15% 0.01 55 / 0.55);

  /* ---- Semantic: text ---- */
  --text-primary:    var(--ink-950);
  --text-secondary:  var(--stone-600);
  --text-tertiary:   var(--stone-500);
  --text-on-inverse: var(--stone-50);
  --text-on-accent:  var(--stone-50);
  --text-link:       var(--copper-600);
  --text-link-hover: var(--copper-700);

  /* ---- Semantic: borders ---- */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-500);
  --border-inverse: oklch(100% 0 0 / 0.16);

  /* ---- Semantic: brand & accents ---- */
  --brand-primary:        var(--copper-500);
  --brand-primary-hover:  var(--copper-600);
  --brand-primary-active: var(--copper-700);
  --brand-secondary:        var(--petrol-500);
  --brand-secondary-hover:  var(--petrol-600);
  --brand-secondary-active: var(--petrol-700);

  /* ---- Semantic: state ---- */
  --state-success:      var(--petrol-500);
  --state-success-bg:   var(--petrol-100);
  --state-warning:      oklch(70% 0.13 75);
  --state-warning-bg:   oklch(95% 0.05 80);
  --state-danger:       oklch(46% 0.16 27);
  --state-danger-bg:    oklch(94% 0.04 25);
  --state-info:         var(--petrol-400);
  --state-info-bg:      var(--petrol-100);

  /* ---- Focus ---- */
  --focus-ring: var(--copper-500);
}