/**
 * Fosil Design Tokens — plain-CSS port for static sites.
 * Faithful mirror of the @theme block in frontend/src/index.css.
 * Source of truth: frontend/src/index.css + frontend/fosil_design_tokens.md
 * Tailwind-only syntax (@theme/@utility/@apply/@layer) intentionally NOT ported.
 */

:root {
  /* ---- Pures ---- */
  --color-blanco: #ffffff;
  --color-negro-pure: #000000;

  /* ---- negro (black) ramp ---- */
  --color-negro-50: #e8e8e8;
  --color-negro-100: #b6b6b6;
  --color-negro-200: #939393;
  --color-negro-300: #626262;
  --color-negro-400: #444444;
  --color-negro-500: #151515;
  --color-negro-default: var(--color-negro-500);
  --color-negro-600: #131313;
  --color-negro-700: #0f0f0f;
  --color-negro-800: #0c0c0c;
  --color-negro-900: #090909;

  /* ---- esmeralda (emerald) ramp ---- */
  --color-esmeralda-50: #e8faf0;
  --color-esmeralda-100: #b6eed0;
  --color-esmeralda-200: #93e6b9;
  --color-esmeralda-300: #66db9a;
  --color-esmeralda-400: #4ad689;
  --color-esmeralda-500: #43d385;
  --color-esmeralda-default: var(--color-esmeralda-500);
  --color-esmeralda-600: #16c666;
  --color-esmeralda-700: #12b65d;
  --color-esmeralda-800: #0b6e38;
  --color-esmeralda-900: #08542b;

  /* ---- gris (grey) ramp ---- */
  --color-gris-50: #fefefe;
  --color-gris-100: #fafafa;
  --color-gris-200: #f8f8f8;
  --color-gris-300: #f5f5f5;
  --color-gris-400: #f3f3f3;
  --color-gris-500: #dedede;
  --color-gris-default: var(--color-gris-500);
  --color-gris-600: #9a9a9a;
  --color-gris-700: #7a7a7a;
  --color-gris-800: #4b4b4b;
  --color-gris-900: #2f2f2f;

  /* ---- carmesi (crimson) ramp ---- */
  --color-carmesi-50: #feebea;
  --color-carmesi-100: #fdc2be;
  --color-carmesi-200: #fca59f;
  --color-carmesi-300: #f97d74;
  --color-carmesi-400: #f8645a;
  --color-carmesi-500: #f73f32;
  --color-carmesi-default: var(--color-carmesi-500);
  --color-carmesi-600: #f23430;
  --color-carmesi-700: #922724;
  --color-carmesi-800: #ac2522;
  --color-carmesi-900: #681615;

  /* ---- azul marino (navy) ramp ---- */
  --color-azul-marino-50: #eaf1fc;
  --color-azul-marino-100: #bfd5f5;
  --color-azul-marino-200: #a0c0f0;
  --color-azul-marino-300: #75a3e9;
  --color-azul-marino-400: #5a91e5;
  --color-azul-marino-500: #3176de;
  --color-azul-marino-default: var(--color-azul-marino-500);
  --color-azul-marino-600: #2d6bca;
  --color-azul-marino-700: #23549e;
  --color-azul-marino-800: #1b417a;
  --color-azul-marino-900: #15325d;

  /* ---- verde manzana (green apple) ramp ---- */
  --color-verde-manzana-50: #e8f7ec;
  --color-verde-manzana-100: #b8e5c4;
  --color-verde-manzana-200: #96d8a8;
  --color-verde-manzana-300: #66c780;
  --color-verde-manzana-400: #49bc68;
  --color-verde-manzana-500: #1bab42;
  --color-verde-manzana-default: var(--color-verde-manzana-500);
  --color-verde-manzana-600: #199c3c;
  --color-verde-manzana-700: #13792f;
  --color-verde-manzana-800: #0f5e24;
  --color-verde-manzana-900: #0b481c;

  /* ---- naranjo zanahoria (carrot) ramp ---- */
  --color-naranjo-zanahoria-50: #fff3eb;
  --color-naranjo-zanahoria-100: #fedac2;
  --color-naranjo-zanahoria-200: #fec8a4;
  --color-naranjo-zanahoria-300: #fdaf7b;
  --color-naranjo-zanahoria-400: #fdaf7b;
  --color-naranjo-zanahoria-500: #fc883a;
  --color-naranjo-zanahoria-default: var(--color-naranjo-zanahoria-500);
  --color-naranjo-zanahoria-600: #e57c35;
  --color-naranjo-zanahoria-700: #b36129;
  --color-naranjo-zanahoria-800: #8b4b20;
  --color-naranjo-zanahoria-900: #6a3918;

  /* ---- turquesa (teal) ramp ---- */
  --color-turquesa-50: #e7fcfd;
  --color-turquesa-100: #b4f6f9;
  --color-turquesa-200: #8ff2f7;
  --color-turquesa-300: #5cecf3;
  --color-turquesa-400: #3de8f1;
  --color-turquesa-500: #0ce2ed;
  --color-turquesa-default: var(--color-turquesa-500);
  --color-turquesa-600: #0bced8;
  --color-turquesa-700: #09a0a8;
  --color-turquesa-800: #077c82;
  --color-turquesa-900: #055f64;

  /* ---- amarillo pera (pear) ramp ---- */
  --color-amarillo-pera-50: #fbfeec;
  --color-amarillo-pera-100: #f1fbc4;
  --color-amarillo-pera-200: #eaf9a8;
  --color-amarillo-pera-300: #e1f680;
  --color-amarillo-pera-400: #dbf567;
  --color-amarillo-pera-500: #d2f241;
  --color-amarillo-pera-default: var(--color-amarillo-pera-500);
  --color-amarillo-pera-600: #bfdc3b;
  --color-amarillo-pera-700: #95ac2e;
  --color-amarillo-pera-800: #748524;
  --color-amarillo-pera-900: #58661b;

  /* ---- amarillo limon (lemon) ramp ---- */
  --color-amarillo-limon-50: #fefce9;
  --color-amarillo-limon-100: #fcf6ba;
  --color-amarillo-limon-200: #faf299;
  --color-amarillo-limon-300: #f8ec6b;
  --color-amarillo-limon-400: #f7e94e;
  --color-amarillo-limon-500: #f5e322;
  --color-amarillo-limon-default: var(--color-amarillo-limon-500);
  --color-amarillo-limon-600: #dfcf1f;
  --color-amarillo-limon-700: #aea118;
  --color-amarillo-limon-800: #877d13;
  --color-amarillo-limon-900: #675f0e;

  /* ---- rojo carmesi (crimson red) ramp ---- */
  --color-rojo-carmesi-50: #feebea;
  --color-rojo-carmesi-100: #fbc0bf;
  --color-rojo-carmesi-200: #f9a2a0;
  --color-rojo-carmesi-300: #f67774;
  --color-rojo-carmesi-400: #f55d59;
  --color-rojo-carmesi-500: #f23430;
  --color-rojo-carmesi-default: var(--color-rojo-carmesi-500);
  --color-rojo-carmesi-600: #dc2f2c;
  --color-rojo-carmesi-700: #ac2522;
  --color-rojo-carmesi-800: #851d1a;
  --color-rojo-carmesi-900: #661614;

  /* ---- Semantic Scheme (light) ---- */
  --color-primary: var(--color-negro-500);
  --color-on-primary: var(--color-blanco);
  --color-primary-container: var(--color-negro-500);
  --color-on-primary-container: var(--color-blanco);

  --color-secondary: var(--color-gris-50);
  --color-on-secondary: var(--color-negro-500);
  --color-secondary-container: var(--color-gris-50);
  --color-on-secondary-container: var(--color-negro-500);

  --color-tertiary: var(--color-esmeralda-500);
  --color-on-tertiary: var(--color-negro-500);
  --color-tertiary-container: var(--color-esmeralda-500);
  --color-on-tertiary-container: var(--color-negro-500);

  --color-success: var(--color-esmeralda-700);
  --color-on-success: var(--color-blanco);
  --color-error: var(--color-carmesi-600);
  --color-on-error: var(--color-blanco);
  --color-error-container: var(--color-carmesi-100);
  --color-on-error-container: var(--color-carmesi-500);

  --color-surface-dim: #eeeeee;
  --color-surface: var(--color-gris-50);
  --color-surface-bright: var(--color-blanco);

  --color-container-lowest: var(--color-blanco);
  --color-container: var(--color-gris-500);
  --color-container-highest: var(--color-gris-600);

  --color-on-surface: var(--color-negro-500);
  --color-surface-variant: var(--color-surface-dim);
  --color-on-surface-variant: var(--color-gris-700);

  --color-outline: var(--color-gris-600);
  --color-outline-variant: #eeeeee;

  --color-inverse-surface: var(--color-gris-900);
  --color-on-inverse-surface: var(--color-blanco);
  --color-inverse-primary: #3090ff;

  --color-discount: var(--color-esmeralda-800);
  --color-on-discount: var(--color-esmeralda-100);
  --color-rollback: var(--color-carmesi-700);
  --color-on-rollback: var(--color-carmesi-50);

  --color-scrim: rgba(0, 0, 0, 0.5);
  --color-state-hover-white: rgba(255, 255, 255, 0.08);
  --color-state-pressed-white: rgba(255, 255, 255, 0.12);
  --color-state-hover-black: rgba(0, 0, 0, 0.04);
  --color-state-pressed-black: rgba(0, 0, 0, 0.08);

  /* ---- Brand-specific (POI markers) ---- */
  --color-brand-shell: #d9272e;
  --color-brand-shell-dark: #992328;
  --color-brand-copec: #146cfd;
  --color-brand-copec-dark: #0765ff;
  --color-brand-aramco: #68b943;
  --color-brand-aramco-dark: #579c38;
  --color-brand-generic: #1f2937;
  --color-brand-generic-dark: #ffffff;

  /* ---- Primitive Sizes ---- */
  --size-0: 0px;
  --size-25: 2px;
  --size-50: 4px;
  --size-75: 6px;
  --size-100: 8px;
  --size-125: 12px;
  --size-150: 14px;
  --size-200: 16px;
  --size-300: 24px;
  --size-400: 32px;
  --size-450: 40px;
  --size-500: 48px;
  --size-600: 56px;
  --size-700: 64px;
  --size-800: 72px;
  --size-900: 80px;
  --size-1000: 88px;
  --size-1100: 96px;
  --size-1200: 128px;

  /* ---- Corner Radius ---- */
  --radius-none: var(--size-0);
  --radius-x-small: var(--size-100);
  --radius-small: var(--size-200);
  --radius-medium: var(--size-300);
  --radius-large: var(--size-400);
  --radius-full: var(--size-1100);

  /* ---- Padding (Semantic Spacing) ---- */
  --spacing-p0: var(--size-0);
  --spacing-p25: var(--size-25);
  --spacing-p50: var(--size-50);
  --spacing-p75: var(--size-75);
  --spacing-p2: var(--size-100);
  --spacing-p1: var(--size-125);
  --spacing-p125: var(--size-125);
  --spacing-p225: 10px;
  --spacing-p3: var(--size-200);
  --spacing-p4: var(--size-300);
  --spacing-p450: var(--size-450);
  --spacing-p5: var(--size-400);
  --spacing-p500: var(--size-500);
  --spacing-p6: var(--size-600);
  --spacing-p7: var(--size-700);
  --spacing-p8: var(--size-1000);
  --spacing-p9: var(--size-1100);

  /* ---- Typography Scale (MatterSQ) ---- */
  --font-size-display-1: 57px;
  --font-size-display-2: 45px;
  --font-size-display-3: 36px;
  --font-size-headline-1: 32px;
  --font-size-headline-2: 24px;
  --font-size-headline-3: 22px;
  --font-size-title-1: 20px;
  --font-size-title-2: 16px;
  --font-size-title-3: 14px;
  --font-size-body-1: 16px;
  --font-size-body-2: 14px;
  --font-size-body-3: 12px;
  --font-size-label-1: 14px;
  --font-size-label-2: 12px;
  --font-size-label-3: 11px;

  /* ---- Font Weights ---- */
  --font-weight-baseline: 400;
  --font-weight-medium: 500;
  --font-weight-light: 300;
  --font-weight-emphasized: 500;

  --font-sans: "MatterSQ", Helvetica, sans-serif;

  /* ---- Elevation Shadows ---- */
  --shadow-elevation-1: 0px 6px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-elevation-2: 0px 8px 8px 0px rgba(0, 0, 0, 0.06), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  --shadow-elevation-3: 0px 12px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  --shadow-elevation-upward-1: 0px -6px 8px 0px rgba(0, 0, 0, 0.04), 0px -2px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-elevation-upward-2: 0px -8px 8px 0px rgba(0, 0, 0, 0.06), 0px -2px 6px 0px rgba(0, 0, 0, 0.08);
  --shadow-elevation-upward-3: 0px -12px 16px 0px rgba(0, 0, 0, 0.08), 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
}