/* ==========================================================================
   Design Tokens - MINGAnet (Vibrant Teal & Living Nature Theme)
   WCAG 2.1 AAA / AA Compliant, Human Editorial, Craft & Non-AI Geometric Form
   ========================================================================== */

:root {
  /* Protagonista Principal: Teal Vibrante, Aguas Vivas & Esmeralda */
  --color-teal: #0A7280;              /* Vibrant Caribbean/Andean Teal — WCAG AA compliant (5.6:1 on white) */
  --color-teal-dark: #0A4D68;         /* Deep Ocean / Highland Teal */
  --color-teal-deep: #05263B;         /* Night Teal for High Authority Headings */
  --color-teal-bright: #05B3C9;       /* Luminous Electric Aqua */
  --color-teal-hover: #066B7A;
  --color-teal-subtle: #EBF8FA;       /* Ultra Fresh Ambient Tint */
  --color-teal-surface: #D9F2F7;      /* Soft Box & Badge Background */
  --color-teal-border: #80D5E2;

  /* Colores de Apoyo y Vida: Hojas, Sol y Semilla */
  --color-emerald: #10B981;
  --color-emerald-dark: #065F46;
  --color-emerald-subtle: #ECFDF5;

  --color-sun: #D97706;               /* Ocre Dorado Vivo */
  --color-sun-hover: #B45309;
  --color-sun-subtle: #FFFBEB;
  --color-sun-border: #FDE68A;

  --color-coral: #E05D38;             /* Semilla / Arcilla Cálida viva */
  --color-coral-subtle: #FFF1EE;
  --color-coral-border: #FDCFC4;

  /* Superficies Luminosas y Aireadas (Evitando tonos apagados/secos) */
  --color-bg: #F7FBFC;
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #EEF7F9;
  --color-bg-alt: #E3F2F5;

  /* Tipografía y Contraste (Cumplimiento estricto WCAG) */
  --color-text: #0F172A;              /* Slate oscuro / máxima nitidez */
  --color-text-secondary: #334155;    /* Slate medio para lectura cómoda */
  --color-text-muted: #64748B;
  --color-text-inverse: #FFFFFF;
  --color-border: #D1E5EA;
  --color-border-subtle: #E2EFF2;

  /* Focus Indicator para accesibilidad por teclado */
  --focus-ring: 3px solid #088395;
  --focus-offset: 3px;

  /* Tipografía */
  --font-editorial: "Newsreader", "Fraunces", Georgia, Cambria, serif;
  --font-ui: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala Tipográfica Fluida con clamp() */
  --fs-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --fs-sm: clamp(0.88rem, 0.84rem + 0.25vw, 0.98rem);
  --fs-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --fs-md: clamp(1.15rem, 1.05rem + 0.5vw, 1.32rem);
  --fs-lg: clamp(1.35rem, 1.2rem + 0.8vw, 1.65rem);
  --fs-xl: clamp(1.65rem, 1.45rem + 1.2vw, 2.15rem);
  --fs-2xl: clamp(2.1rem, 1.8rem + 1.8vw, 2.9rem);
  --fs-3xl: clamp(2.6rem, 2.2rem + 2.4vw, 3.8rem);

  /* Alturas de Línea */
  --lh-tight: 1.18;
  --lh-heading: 1.28;
  --lh-body: 1.65;
  --lh-relaxed: 1.78;

  /* Espaciados */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Radios Editoriales / No-AI (Geometría nítida, Cero píldoras, Cero curvas genéricas) */
  --radius-none: 0px;
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 0px;

  /* Sombras Físicas / Imprenta Editorial / Linocut Craft */
  --shadow-sm: 2px 2px 0px rgba(10, 77, 104, 0.15);
  --shadow-md: 4px 4px 0px rgba(10, 77, 104, 0.22);
  --shadow-lg: 6px 6px 0px rgba(10, 77, 104, 0.28);
  --shadow-tactile: 3px 3px 0px var(--color-teal-dark);
  --shadow-glow: 0 0 0 2px var(--color-teal-bright);

  /* Anchos de Contenedor */
  --max-w-content: 72rem;     /* 1152px */
  --max-w-narrow: 52rem;      /* 832px */
  --max-w-wide: 84rem;        /* 1344px */
}

/* Modificadores de Tamaño Tipográfico Accesible */
html[data-font-size="sm"] { font-size: 88%; }
html[data-font-size="lg"] { font-size: 112%; }
html[data-font-size="xl"] { font-size: 125%; }

/* Modo Nocturno Azul Océano / Deep Teal Dark */
html[data-theme="dark"] {
  --color-bg: #07151E;
  --color-bg-card: #0E2430;
  --color-bg-elevated: #133040;
  --color-bg-subtle: #16384C;
  --color-bg-alt: #0D212D;

  --color-text: #F1F8FA;
  --color-text-secondary: #CBDDE3;
  --color-text-muted: #8AA8B4;
  --color-border: #1E465A;
  --color-border-subtle: #183747;

  --color-teal: #14B8A6;
  --color-teal-bright: #2DD4BF;
  --color-teal-hover: #5EEAD4;
  --color-teal-subtle: #0B333B;
  --color-teal-surface: #0E3544;
  --color-teal-border: #134E5E;

  --color-sun: #FBBF24;
  --color-sun-hover: #FCD34D;
  --color-sun-subtle: #332608;

  --color-coral: #F87171;
  --color-coral-subtle: #331515;

  --focus-ring: 3px solid #2DD4BF;
  --shadow-sm: 2px 2px 0px rgba(0, 0, 0, 0.6);
  --shadow-md: 4px 4px 0px rgba(0, 0, 0, 0.8);
  --shadow-lg: 6px 6px 0px rgba(0, 0, 0, 0.95);
  --shadow-tactile: 3px 3px 0px var(--color-teal-bright);
}

/* Modo Alto Contraste (WCAG AAA Strict) */
html[data-theme="high-contrast"] {
  --color-bg: #000000;
  --color-bg-card: #0A0A0A;
  --color-bg-elevated: #141414;
  --color-bg-subtle: #1C1C1C;
  --color-bg-alt: #111111;

  --color-text: #FFFFFF;
  --color-text-secondary: #EEEEEE;
  --color-text-muted: #CCCCCC;
  --color-border: #FFFFFF;
  --color-border-subtle: #AAAAAA;

  --color-teal: #00FFFF;
  --color-teal-bright: #33FFFF;
  --color-teal-hover: #66FFFF;
  --color-teal-subtle: #003333;
  --color-teal-border: #FFFFFF;

  --color-sun: #FFFF00;
  --color-sun-hover: #FFFF66;
  --color-sun-subtle: #333300;

  --color-coral: #FF6666;
  --color-coral-subtle: #330000;

  --focus-ring: 4px solid #FFFF00;
  --focus-offset: 4px;
}