@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Colors (Blue) */
  --color-blue-0: #FFFFFF;
  --color-blue-50: #F4F9FF;
  --color-blue-100: #DDEDFE;
  --color-blue-200: #A2D0FF;
  --color-blue-300: #489CF2;
  --color-blue-400: #1677DA;
  --color-blue-500: #0C6DD0;
  --color-blue-600: #014B96;
  --color-blue-700: #003F7F;
  --color-blue-800: #012952;
  --color-blue-900: #001933;
  --color-blue-950: #000D1A;
  --color-blue-1000: #000D1A;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Neutral) */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F3F3F3;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;
  --color-neutral-950: #000002;
  --color-neutral-1000: #000002;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Red) */
  --color-red-0: #FFFFFF;
  --color-red-50: #FFF8F9;
  --color-red-100: #FFE6ED;
  --color-red-200: #FFBED0;
  --color-red-300: #FD94B2;
  --color-red-400: #F66790;
  --color-red-500: #ED4A78;
  --color-red-600: #D22959;
  --color-red-700: #A80E3A;
  --color-red-800: #7E0326;
  --color-red-900: #4A0116;
  --color-red-950: #190007;
  --color-red-1000: #190007;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Green) */
  --color-green-0: #FFFFFF;
  --color-green-50: #EEFFFF;
  --color-green-100: #DBFFFF;
  --color-green-200: #AEFFFF;
  --color-green-300: #6BE8E8;
  --color-green-400: #0BBCBC;
  --color-green-500: #008B8B;
  --color-green-600: #027373;
  --color-green-700: #005555;
  --color-green-800: #003838;
  --color-green-900: #002020;
  --color-green-950: #000D0D;
  --color-green-1000: #000D0D;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Yellow) */
  --color-yellow-0: #FFFFFF;
  --color-yellow-50: #FFFEF4;
  --color-yellow-100: #FFFADA;
  --color-yellow-200: #F8E059;
  --color-yellow-300: #DFC220;
  --color-yellow-400: #D2B61A;
  --color-yellow-500: #BA9F04;
  --color-yellow-600: #726100;
  --color-yellow-700: #493F00;
  --color-yellow-800: #2E2800;
  --color-yellow-900: #1F1B00;
  --color-yellow-950: #0B0A00;
  --color-yellow-1000: #0B0A00;
  --color-blue-focus-100: #A2D0FF;
  --color-blue-focus-500: #0055AC;

  /* Colors (Success) */
  --color-success-0: #FFFFFF;
  --color-success-50: #F0FFF4;
  --color-success-100: #E5FFEC;
  --color-success-200: #BFEECD;
  --color-success-300: #90E0AA;
  --color-success-400: #5BCF83;
  --color-success-500: #0A9B3A;
  --color-success-600: #007B1B;
  --color-success-700: #006616;
  --color-success-800: #003D0D;
  --color-success-900: #002008;
  --color-success-950: #000A02;
  --color-success-1000: #000A02;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Warning) */
  --color-warning-0: #FFFFFF;
  --color-warning-50: #FFF9EE;
  --color-warning-100: #FFF4DD;
  --color-warning-200: #FFDB8F;
  --color-warning-300: #FFC352;
  --color-warning-400: #FFA61F;
  --color-warning-500: #D98800;
  --color-warning-600: #A36700;
  --color-warning-700: #855200;
  --color-warning-800: #462B00;
  --color-warning-900: #291900;
  --color-warning-950: #050300;
  --color-warning-1000: #050300;
  --color-blue-focus-100: #A2D0FF;
  --color-blue-focus-500: #0055AC;

  /* Colors (Error) */
  --color-error-0: #FFFFFF;
  --color-error-50: #FFF3F3;
  --color-error-100: #FFE5E5;
  --color-error-200: #FFC7C7;
  --color-error-300: #FF9B9B;
  --color-error-400: #FF6363;
  --color-error-500: #E91717;
  --color-error-600: #D31010;
  --color-error-700: #B00C0C;
  --color-error-800: #690202;
  --color-error-900: #350000;
  --color-error-950: #070000;
  --color-error-1000: #070000;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Colors (Info) */
  --color-info-0: #FFFFFF;
  --color-info-50: #F2F6FF;
  --color-info-100: #E5EEFF;
  --color-info-200: #C2D8FF;
  --color-info-300: #94BDFF;
  --color-info-400: #5E9CFF;
  --color-info-500: #1362EB;
  --color-info-600: #003FC8;
  --color-info-700: #0032A3;
  --color-info-800: #00174E;
  --color-info-900: #000C25;
  --color-info-950: #000207;
  --color-info-1000: #000207;
  --color-blue-focus-100: #F8E059;
  --color-blue-focus-500: #8F7A03;

  /* Typography */
  --font-sans: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-heading: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-family-base: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-family-title: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-32: 8rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-default: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Transitions */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --ease: ease;
  
  /* Sistema de Accesibilidad de Fuente */
  --text-zoom: 1;
}

@layer base {
  html {
    font-size: 16px;
    line-height: normal;
  }

  * {
    box-sizing: border-box;
  }

  .material-symbols {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    font-size: inherit;
  }

  /* ========================================================================
     LAYER 1: PRIMITIVES (The Palette)
     ======================================================================== */
  :root, [data-scheme] {
    --ref-base: var(--color-0);
    --ref-wash: var(--color-50);
    --ref-tint: var(--color-100);
    --ref-soft: var(--color-200);
    --ref-medium-soft: var(--color-300);
    --ref-medium: var(--color-400);

    --ref-vivid: var(--color-600);
    --ref-vivid-dark: var(--color-700);
    --ref-strong: var(--color-700);
    --ref-deep: var(--color-800);
    --ref-contrast: var(--color-1000);
    --ref-light: var(--color-950);
    --ref-light: var(--color-0);
    --ref-shadow: rgba(85, 85, 85, 0.3);

    --ref-focus-contrast: var(--color-focus-100);
    --ref-focus-vivid: var(--color-focus-500);

    --color-canvas: var(--ref-base);
    --color-mantle: var(--ref-wash);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-contrast);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-contrast);
    --color-content-low: var(--ref-strong);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);

    --radius-none: 0;
    --radius-xs: 2px;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 16px;
    --radius-xxl: 24px;
    --radius-full: 9999px;
  }

  .dark, .dark [data-scheme] {
    --ref-base: var(--color-1000);
    --ref-wash: var(--color-900);
    --ref-tint: var(--color-800);
    --ref-soft: var(--color-800);
    --ref-medium-soft: var(--color-700);
    --ref-medium: var(--color-600);

    --ref-vivid: var(--color-500);
    --ref-vivid-dark: var(--color-600);
    --ref-strong: var(--color-200);
    --ref-deep: var(--color-100);
    --ref-contrast: var(--color-0);
    --ref-light: var(--color-0);

    --ref-shadow: rgba(232, 232, 232, 0.3);

    --ref-focus-contrast: var(--color-focus-100);
    --ref-focus-vivid: var(--color-focus-500);

    /* Forzar re-evaluación de la composición semántica */
    --color-canvas: var(--ref-base);
    --color-mantle: var(--ref-wash);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-contrast);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-contrast);
    --color-content-low: var(--ref-strong);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }

  .light, .light [data-scheme] {
    --ref-base: var(--color-0);
    --ref-wash: var(--color-50);
    --ref-tint: var(--color-100);
    --ref-soft: var(--color-200);
    --ref-medium-soft: var(--color-300);
    --ref-medium: var(--color-400);

    --ref-vivid: var(--color-600);
    --ref-vivid-dark: var(--color-700);
    --ref-strong: var(--color-700);
    --ref-deep: var(--color-800);
    --ref-contrast: var(--color-1000);
    --ref-light: var(--color-0);
    --ref-shadow: rgba(85, 85, 85, 0.3);

    --ref-focus-contrast: var(--color-focus-100);
    --ref-focus-vivid: var(--color-focus-500);

    /* Forzar re-evaluación de la composición semántica */
    --color-canvas: var(--ref-base);
    --color-mantle: var(--ref-wash);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-contrast);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-contrast);
    --color-content-low: var(--ref-strong);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }


  /* ========================================================================
     LAYER 3: SEMANTICS (The Context) - Color Schemes
     ======================================================================== */

  /* --- SCHEME: BLUE --- */
  [data-scheme='blue'] {
    --color-0: var(--color-blue-0);
    --color-50: var(--color-blue-50);
    --color-100: var(--color-blue-100);
    --color-200: var(--color-blue-200);
    --color-300: var(--color-blue-300);
    --color-400: var(--color-blue-400);
    --color-500: var(--color-blue-500);
    --color-600: var(--color-blue-600);
    --color-700: var(--color-blue-700);
    --color-800: var(--color-blue-800);
    --color-900: var(--color-blue-900);
    --color-950: var(--color-blue-950);
    --color-1000: var(--color-blue-1000);
    --color-focus-100: var(--color-blue-focus-100);
    --color-focus-500: var(--color-blue-focus-500);
  }

  /* --- SCHEME: RED --- */
  [data-scheme='red'] {
    --color-0: var(--color-red-0);
    --color-50: var(--color-red-50);
    --color-100: var(--color-red-100);
    --color-200: var(--color-red-200);
    --color-300: var(--color-red-300);
    --color-400: var(--color-red-400);
    --color-500: var(--color-red-500);
    --color-600: var(--color-red-600);
    --color-700: var(--color-red-700);
    --color-800: var(--color-red-800);
    --color-900: var(--color-red-900);
    --color-950: var(--color-red-950);
    --color-1000: var(--color-red-1000);
    --color-focus-100: var(--color-red-focus-100);
    --color-focus-500: var(--color-red-focus-500);
  }

  /* --- SCHEME: GREEN --- */
  [data-scheme='green'] {
    --color-0: var(--color-green-0);
    --color-50: var(--color-green-50);
    --color-100: var(--color-green-100);
    --color-200: var(--color-green-200);
    --color-300: var(--color-green-300);
    --color-400: var(--color-green-400);
    --color-500: var(--color-green-500);
    --color-600: var(--color-green-600);
    --color-700: var(--color-green-700);
    --color-800: var(--color-green-800);
    --color-900: var(--color-green-900);
    --color-950: var(--color-green-950);
    --color-1000: var(--color-green-1000);
    --color-focus-100: var(--color-green-focus-100);
    --color-focus-500: var(--color-green-focus-500);
  }

  /* --- SCHEME: YELLOW --- */
  [data-scheme='yellow'] {
    --color-0: var(--color-yellow-0);
    --color-50: var(--color-yellow-50);
    --color-100: var(--color-yellow-100);
    --color-200: var(--color-yellow-200);
    --color-300: var(--color-yellow-300);
    --color-400: var(--color-yellow-400);
    --color-500: var(--color-yellow-500);
    --color-600: var(--color-yellow-600);
    --color-700: var(--color-yellow-700);
    --color-800: var(--color-yellow-800);
    --color-900: var(--color-yellow-900);
    --color-950: var(--color-yellow-950);
    --color-1000: var(--color-yellow-1000);
    --color-focus-100: var(--color-yellow-focus-100);
    --color-focus-500: var(--color-yellow-focus-500);
  }

  /* --- SCHEME: NEUTRAL --- */
  [data-scheme='neutral'] {
    --color-0: var(--color-neutral-0);
    --color-50: var(--color-neutral-50);
    --color-100: var(--color-neutral-100);
    --color-200: var(--color-neutral-200);
    --color-300: var(--color-neutral-300);
    --color-400: var(--color-neutral-400);
    --color-500: var(--color-neutral-500);
    --color-600: var(--color-neutral-600);
    --color-700: var(--color-neutral-700);
    --color-800: var(--color-neutral-800);
    --color-900: var(--color-neutral-900);
    --color-950: var(--color-neutral-950);
    --color-1000: var(--color-neutral-1000);
    --color-focus-100: var(--color-neutral-focus-100);
    --color-focus-500: var(--color-neutral-focus-500);
  }

  /* --- SCHEME: SUCCESS --- */
  [data-scheme='success'] {
    --color-0: var(--color-success-0);
    --color-50: var(--color-success-50);
    --color-100: var(--color-success-100);
    --color-200: var(--color-success-200);
    --color-300: var(--color-success-300);
    --color-400: var(--color-success-400);
    --color-500: var(--color-success-500);
    --color-600: var(--color-success-600);
    --color-700: var(--color-success-700);
    --color-800: var(--color-success-800);
    --color-900: var(--color-success-900);
    --color-950: var(--color-success-950);
    --color-1000: var(--color-success-1000);
    --color-focus-100: var(--color-success-focus-100);
    --color-focus-500: var(--color-success-focus-500);
  }

  /* --- SCHEME: WARNING --- */
  [data-scheme='warning'] {
    --color-0: var(--color-warning-0);
    --color-50: var(--color-warning-50);
    --color-100: var(--color-warning-100);
    --color-200: var(--color-warning-200);
    --color-300: var(--color-warning-300);
    --color-400: var(--color-warning-400);
    --color-500: var(--color-warning-500);
    --color-600: var(--color-warning-600);
    --color-700: var(--color-warning-700);
    --color-800: var(--color-warning-800);
    --color-900: var(--color-warning-900);
    --color-950: var(--color-warning-950);
    --color-1000: var(--color-warning-1000);
    --color-focus-100: var(--color-warning-focus-100);
    --color-focus-500: var(--color-warning-focus-500);
  }

  /* --- SCHEME: ERROR --- */
  [data-scheme='error'] {
    --color-0: var(--color-error-0);
    --color-50: var(--color-error-50);
    --color-100: var(--color-error-100);
    --color-200: var(--color-error-200);
    --color-300: var(--color-error-300);
    --color-400: var(--color-error-400);
    --color-500: var(--color-error-500);
    --color-600: var(--color-error-600);
    --color-700: var(--color-error-700);
    --color-800: var(--color-error-800);
    --color-900: var(--color-error-900);
    --color-950: var(--color-error-950);
    --color-1000: var(--color-error-1000);
    --color-focus-100: var(--color-error-focus-100);
    --color-focus-500: var(--color-error-focus-500);
  }

  /* --- SCHEME: INFO --- */
  [data-scheme='info'] {
    --color-0: var(--color-info-0);
    --color-50: var(--color-info-50);
    --color-100: var(--color-info-100);
    --color-200: var(--color-info-200);
    --color-300: var(--color-info-300);
    --color-400: var(--color-info-400);
    --color-500: var(--color-info-500);
    --color-600: var(--color-info-600);
    --color-700: var(--color-info-700);
    --color-800: var(--color-info-800);
    --color-900: var(--color-info-900);
    --color-950: var(--color-info-950);
    --color-1000: var(--color-info-1000);
    --color-focus-100: var(--color-info-focus-100);
    --color-focus-500: var(--color-info-focus-500);
  }

  /* ========================================================================
     LAYER 4: COMPOSITION / VARIANTS
     ======================================================================== */

  [data-contrast='canvas-high'] {
    --color-canvas: var(--ref-base);
    --color-mantle: var(--ref-wash);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-contrast);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-contrast);
    --color-content-low: var(--ref-strong);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }

  [data-contrast='canvas-low'] {
    --color-canvas: var(--ref-base);
    --color-mantle: var(--ref-wash);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-strong);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-vivid);
    --color-content-low: var(--ref-vivid);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }

  [data-contrast='mantle-high'] {
    --color-canvas: var(--ref-wash);
    --color-mantle: var(--ref-base);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-contrast);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-contrast);
    --color-content-low: var(--ref-strong);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }

  [data-contrast='mantle-low'] {
    --color-canvas: var(--ref-wash);
    --color-mantle: var(--ref-base);
    --color-surface: var(--ref-tint);
    --color-on-surface: var(--ref-strong);
    --color-border: var(--ref-medium);
    --color-content: var(--ref-strong);
    --color-content-low: var(--ref-vivid);
    --color-main: var(--ref-vivid);
    --color-on-main: var(--ref-light);
    --color-focus-ring: var(--ref-focus-vivid);
  }

  [data-contrast='solid'] {
    --color-canvas: var(--ref-vivid);
    --color-mantle: var(--ref-vivid-dark);
    --color-surface: var(--ref-vivid-dark);
    --color-on-surface: var(--ref-light);
    --color-border: var(--ref-light);
    --color-content: var(--ref-light);
    --color-content-low: var(--ref-light);
    --color-main: var(--ref-base);
    --color-on-main: var(--ref-vivid);
    --color-focus-ring: var(--ref-focus-contrast);
  }

  /* ========================================================================
     DEFAULT STYLES
     ======================================================================== */

  body {
    @apply antialiased;
    background-color: var(--color-canvas);
    color: var(--color-content);
    font-family: var(--font-family-base);
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-family-title);
  }
}

@layer utilities {
  .container {
    @apply max-w-7xl;
  }
}