/* ============================================================
   Onihub — sistema de cor
   Light é o tema BASE (:root). Dark é derivado, via [data-theme="dark"].
   Primitivos (escalas) + aliases semânticos. Use os aliases no produto.
   ============================================================ */

:root {
  /* ---------- primitivos: petróleo (teal) — a cor da marca ---------- */
  --teal-50:  #EDF6F4;
  --teal-100: #DEF0EE;
  --teal-200: #BCE0DB;
  --teal-300: #8FC9C2;
  --teal-400: #4FA89E;
  --teal-500: #14857B;
  --teal-600: #0F766E; /* ação primária (light) */
  --teal-700: #0C6059;
  --teal-800: #0A4E49;
  --teal-900: #08403C;
  --teal-950: #052E2B;

  /* ---------- primitivos: neutros cinza-sálvia (tingidos de teal) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7FAF9;
  --neutral-100: #F3F7F6;
  --neutral-200: #E8EEEC;
  --neutral-300: #DCE4E2;
  --neutral-400: #BFCCC9;
  --neutral-500: #8DA09C;
  --neutral-600: #5F716E;
  --neutral-700: #45534F;
  --neutral-800: #2B3835;
  --neutral-900: #1B2623;
  --neutral-950: #11201E; /* tinta */

  /* ---------- primitivos: dark-only (verde-petróleo quase preto) ---------- */
  --abyss-950: #0A1311;
  --abyss-900: #0D1715;
  --abyss-850: #111D1A;
  --abyss-800: #152420;
  --abyss-700: #1C2F2A;
  --abyss-600: #27403A;
  --abyss-500: #355248;

  /* ---------- primitivos: teal claro p/ dark mode ---------- */
  --teal-bright:       #25BCAA;
  --teal-bright-hover: #3BCDBB;
  --teal-bright-press: #1EA796;
  --teal-bright-text:  #5ADBC9;

  /* ---------- semânticos de estado (primitivos) ---------- */
  --green-600: #2E8E5A;  --green-soft: #E2F2E8;
  --amber-600: #B45309;  --amber-soft: #F8EFD9;
  --red-600:   #C2492E;  --red-soft:   #FAE7E1;
  --blue-600:  #3A6FD8;  --blue-soft:  #E7EEFB;

  /* ============ ALIASES (tema light) ============ */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-raised: var(--neutral-0);
  --surface-inverse: var(--neutral-950);

  --text-primary:   var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   #E9F1EF;
  --text-on-accent: #FFFFFF;

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

  --accent:       var(--teal-600);
  --accent-hover: var(--teal-700);
  --accent-press: var(--teal-800);
  --accent-soft:  var(--teal-100);
  --accent-text:  var(--teal-700);

  --focus-ring: rgba(15, 118, 110, 0.35);

  --ok:          var(--green-600);
  --ok-soft:     var(--green-soft);
  --warn:        var(--amber-600);
  --warn-soft:   var(--amber-soft);
  --danger:      var(--red-600);
  --danger-soft: var(--red-soft);
  --info:        var(--blue-600);
  --info-soft:   var(--blue-soft);

  --shadow-1: 0 1px 2px rgba(17, 32, 30, 0.05);
  --shadow-2: 0 2px 8px rgba(17, 32, 30, 0.07);
  --shadow-3: 0 12px 32px rgba(17, 32, 30, 0.12);

  --scrim: rgba(17, 32, 30, 0.45);

  color-scheme: light;
}

/* ============ ALIASES (tema dark) ============ */
[data-theme="dark"] {
  --surface-page:   var(--abyss-900);
  --surface-card:   var(--abyss-800);
  --surface-sunken: var(--abyss-950);
  --surface-raised: var(--abyss-700);
  --surface-inverse: var(--neutral-50);

  --text-primary:   #E9F1EF;
  --text-secondary: #AEC0BB;
  --text-muted:     #7C918C;
  --text-inverse:   var(--neutral-950);
  --text-on-accent: #052E2B;

  --border-subtle: #20312C;
  --border-strong: #2C423B;
  --border-input:  #32493F;

  --accent:       var(--teal-bright);
  --accent-hover: var(--teal-bright-hover);
  --accent-press: var(--teal-bright-press);
  --accent-soft:  rgba(37, 188, 170, 0.13);
  --accent-text:  var(--teal-bright-text);

  --focus-ring: rgba(37, 188, 170, 0.4);

  --ok:          #4BC98A;
  --ok-soft:     rgba(75, 201, 138, 0.14);
  --warn:        #E0A04E;
  --warn-soft:   rgba(224, 160, 78, 0.14);
  --danger:      #E5705A;
  --danger-soft: rgba(229, 112, 90, 0.14);
  --info:        #6E9BE8;
  --info-soft:   rgba(110, 155, 232, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);

  --scrim: rgba(4, 10, 9, 0.6);

  color-scheme: dark;
}