/* ==========================================================================
   Tokens de diseno neutrales y sobrios — Portal de Clientes Restrategia
   Listos para sustituirse cuando Restrategia provea su guia de identidad.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Superficies y texto (contraste >= 4.5:1) */
  --bg-canvas: #f5f5f2;
  --bg-surface: #ffffff;
  --bg-subtle: #ecece7;
  --bg-dev-bar: #eef2f6;

  --text-primary: #141b22;
  --text-secondary: #43505e;
  --text-inverse: #ffffff;

  /* Bordes (>= 3:1 para componentes de interfaz) */
  --border-subtle: #cbd2d9;
  --border-strong: #616e7c;

  /* Acento sobrio editorial (petroleo profundo) */
  --accent: #0d4a5a;
  --accent-hover: #093744;
  --accent-soft: #e4f0f3;
  --focus-ring: #0b57d0;

  /* Estados semanticos (siempre acompanados de texto e icono) */
  --status-ok-bg: #e7f4ed;
  --status-ok-text: #135334;
  --status-ok-border: #2a7b52;

  --status-warn-bg: #fcf3de;
  --status-warn-text: #6e4500;
  --status-warn-border: #9f6700;

  --status-danger-bg: #fbeaea;
  --status-danger-text: #7e1919;
  --status-danger-border: #b33030;

  --status-info-bg: #e8f1fa;
  --status-info-text: #154373;
  --status-info-border: #2b6cb0;

  --status-muted-bg: #eceef1;
  --status-muted-text: #38434f;
  --status-muted-border: #6a7581;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20, 27, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 27, 34, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas: #101418;
    --bg-surface: #181f26;
    --bg-subtle: #212a33;
    --bg-dev-bar: #1a2430;

    --text-primary: #f0f4f8;
    --text-secondary: #bcccdc;
    --text-inverse: #0c1217;

    --border-subtle: #3b4754;
    --border-strong: #8292a2;

    --accent: #67bfd4;
    --accent-hover: #8cd3e3;
    --accent-soft: #183640;
    --focus-ring: #7cb3ff;

    --status-ok-bg: #133524;
    --status-ok-text: #9be0ba;
    --status-ok-border: #4da677;

    --status-warn-bg: #3b2a09;
    --status-warn-text: #ffd685;
    --status-warn-border: #c98a18;

    --status-danger-bg: #3d1515;
    --status-danger-text: #ffb3b3;
    --status-danger-border: #d96262;

    --status-info-bg: #152b45;
    --status-info-text: #a9d0ff;
    --status-info-border: #5592d6;

    --status-muted-bg: #242c35;
    --status-muted-text: #cbd5e1;
    --status-muted-border: #7b8896;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
}

@media (forced-colors: active) {
  :root {
    --bg-canvas: Canvas;
    --bg-surface: Canvas;
    --bg-subtle: Canvas;
    --bg-dev-bar: Canvas;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --text-inverse: HighlightText;
    --border-subtle: CanvasText;
    --border-strong: CanvasText;
    --accent: Highlight;
    --accent-hover: Highlight;
    --accent-soft: Canvas;
    --focus-ring: Highlight;
  }
}