/**
 * tokens.css
 * Design System tokens extraídos de Figma Foundations
 * Archivo: https://www.figma.com/design/l3h1fP5rmp7Gg6QB94nsDG/Foundations
 */

:root {

  /* ============================================
     COLORES — Paletas primitivas
     ============================================ */

  /* TILE — Color de marca principal (teal) */
  --color-tile-50:  #E7F2F3;
  --color-tile-100: #D0E4E7;
  --color-tile-200: #A1C9CF;
  --color-tile-300: #71AEB7;
  --color-tile-400: #42939F;
  --color-tile-500: #0E7787; /* PRIMARY BRAND */
  --color-tile-600: #0F606C;
  --color-tile-700: #0B4851;
  --color-tile-800: #083036;
  --color-tile-900: #062428;
  --color-tile-950: #020C0D;

  /* GOLD */
  --color-gold-50:  #F9F7F1;
  --color-gold-100: #F4EFE4;
  --color-gold-200: #E9DEC9;
  --color-gold-300: #DDCEAD;
  --color-gold-400: #D2BD92;
  --color-gold-500: #C7AD77;
  --color-gold-600: #9F8A5F;
  --color-gold-700: #776847;
  --color-gold-800: #50462F;
  --color-gold-900: #282318;
  --color-gold-950: #14110C;

  /* SILVER — Grises azulados */
  --color-silver-50:  #F8FAFC;
  --color-silver-100: #F1F5F9;
  --color-silver-200: #E2E8F0;
  --color-silver-300: #BBC6D5;
  --color-silver-400: #94A3B8;
  --color-silver-500: #64748B;
  --color-silver-600: #475569;
  --color-silver-700: #334155;
  --color-silver-800: #1E263B;
  --color-silver-900: #0F172A;
  --color-silver-950: #020617;

  /* SKY — Cyan claro */
  --color-sky-50:  #F7FFFF;
  --color-sky-100: #EDFFFF;
  --color-sky-200: #CEFAFE;
  --color-sky-300: #A3F4FD;
  --color-sky-400: #52EAFD;
  --color-sky-500: #05D3F2;
  --color-sky-600: #0BA8CB;
  --color-sky-700: #1F7EAD;
  --color-sky-800: #0B628E;
  --color-sky-900: #08415E;
  --color-sky-950: #053345;

  /* AMBER — Dorado/naranja */
  --color-amber-50:  #FFF9EB;
  --color-amber-100: #FFEECC;
  --color-amber-200: #FFDD99;
  --color-amber-300: #FFD480;
  --color-amber-400: #FFC34C;
  --color-amber-500: #FFB21A;
  --color-amber-600: #F5A300;
  --color-amber-700: #CC8800;
  --color-amber-800: #996600;
  --color-amber-900: #664400;
  --color-amber-950: #432D00;

  /* RED */
  --color-red-50:  #FEE7E7;
  --color-red-100: #FCCFCF;
  --color-red-200: #FA9E9E;
  --color-red-300: #F98686;
  --color-red-400: #F76E6E;
  --color-red-500: #F64C4C;
  --color-red-600: #F20D0D;
  --color-red-700: #C20A0A;
  --color-red-800: #910808;
  --color-red-900: #610505;
  --color-red-950: #380000;

  /* GREEN */
  --color-green-50:  #ECF9F2;
  --color-green-100: #D9F2E5;
  --color-green-200: #B3E5CC;
  --color-green-300: #9FDFBF;
  --color-green-400: #79D2A6;
  --color-green-500: #40BF7F;
  --color-green-600: #39AC73;
  --color-green-700: #309161;
  --color-green-800: #26734C;
  --color-green-900: #194D33;
  --color-green-950: #113523;

  /* NEUTRAL — Grises puros */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0F0F0F;

  /* MISC */
  --color-misc-1: #7DC9FF;
  --color-misc-2: #BC5807;

  /* ============================================
     COLORES SEMÁNTICOS
     ============================================ */

  --color-brand-primary:        var(--color-tile-500);
  --color-brand-primary-hover:  var(--color-tile-600);
  --color-brand-primary-active: var(--color-tile-700);
  --color-brand-primary-light:  var(--color-tile-100);
  --color-brand-primary-dark:   var(--color-tile-800);

  --color-text-default:     #1E293B; /* silver-800 aprox */
  --color-text-secondary:   var(--color-silver-500);
  --color-text-muted:       var(--color-silver-400);
  --color-text-inverse:     var(--color-neutral-0);
  --color-text-brand:       var(--color-tile-500);

  --color-bg-default:       var(--color-neutral-0);
  --color-bg-subtle:        var(--color-silver-50);
  --color-bg-muted:         var(--color-silver-100);
  --color-bg-brand:         var(--color-tile-500);
  --color-bg-brand-dark:    var(--color-tile-800);

  --color-border-default:   var(--color-silver-200);
  --color-border-strong:    var(--color-silver-300);
  --color-border-brand:     var(--color-tile-500);

  --color-success:          var(--color-green-500);
  --color-success-light:    var(--color-green-50);
  --color-warning:          var(--color-amber-500);
  --color-warning-light:    var(--color-amber-50);
  --color-error:            var(--color-red-500);
  --color-error-light:      var(--color-red-50);
  --color-info:             var(--color-sky-500);
  --color-info-light:       var(--color-sky-50);

  /* ============================================
     TIPOGRAFÍA
     ============================================ */

  --font-family-primary:   'Nunito Sans', sans-serif;
  --font-family-secondary: 'Bitter', serif;

  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Tamaños — Desktop */
  --typo-size-display:     72px;
  --typo-size-heading-xxl: 60px;
  --typo-size-heading-xl:  48px;
  --typo-size-heading-l:   40px;
  --typo-size-heading-m:   36px;
  --typo-size-heading-s:   28px;
  --typo-size-heading-xs:  24px;
  --typo-size-body-xl:     20px;
  --typo-size-body-l:      18px;
  --typo-size-body-m:      16px;
  --typo-size-body-s:      14px;
  --typo-size-body-xs:     12px;
  --typo-size-button-l:    18px;
  --typo-size-button-m:    16px;
  --typo-size-button-s:    14px;

  /* Tamaños — Mobile */
  --typo-size-mobile-heading-xxl: 44px;
  --typo-size-mobile-heading-xl:  36px;
  --typo-size-mobile-heading-l:   30px;
  --typo-size-mobile-heading-m:   26px;
  --typo-size-mobile-heading-s:   22px;
  --typo-size-mobile-heading-xs:  20px;
  --typo-size-mobile-body-l:      16px;
  --typo-size-mobile-body-m:      15px;
  --typo-size-mobile-body-s:      13px;

  /* Line heights */
  --typo-lh-tight:    1.2;
  --typo-lh-snug:     1.3;
  --typo-lh-normal:   1.4;
  --typo-lh-relaxed:  1.5;
  --typo-lh-loose:    1.6;
  --typo-lh-button:   24px;

  /* Letter spacing */
  --typo-ls-tight:  -0.02em;
  --typo-ls-normal:  0;
  --typo-ls-wide:    0.02em;
  --typo-ls-wider:   0.05em;

  /* ============================================
     ESPACIADO — Base 16px
     ============================================ */

  --spacing-0:   0px;
  --spacing-1:   2px;
  --spacing-2:   4px;
  --spacing-3:   8px;
  --spacing-4:   12px;
  --spacing-5:   16px;
  --spacing-6:   20px;
  --spacing-7:   24px;
  --spacing-8:   28px;
  --spacing-9:   32px;
  --spacing-10:  40px;
  --spacing-11:  48px;
  --spacing-12:  64px;
  --spacing-13:  80px;
  --spacing-14:  96px;
  --spacing-15:  128px;
  --spacing-16:  160px;
  --spacing-17:  192px;
  --spacing-18:  256px;
  --spacing-19:  320px;

  /* Aliases semánticos */
  --spacing-xs:  var(--spacing-2);   /* 4px */
  --spacing-sm:  var(--spacing-3);   /* 8px */
  --spacing-md:  var(--spacing-5);   /* 16px */
  --spacing-lg:  var(--spacing-7);   /* 24px */
  --spacing-xl:  var(--spacing-9);   /* 32px */
  --spacing-2xl: var(--spacing-11);  /* 48px */
  --spacing-3xl: var(--spacing-12);  /* 64px */
  --spacing-4xl: var(--spacing-13);  /* 80px */
  --spacing-5xl: var(--spacing-14);  /* 96px */

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;   /* componentes estándar (botones, inputs) */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ============================================
     SOMBRAS — Light mode
     ============================================ */

  --shadow-xs:  0px 1px  2px  0px rgba(30, 41, 59, 0.06);
  --shadow-sm:  0px 2px  6px  0px rgba(30, 41, 59, 0.08);
  --shadow-md:  0px 6px  12px 0px rgba(30, 41, 59, 0.10);
  --shadow-lg:  0px 17px 33px 0px rgba(30, 41, 59, 0.12);
  --shadow-xl:  0px 25px 40px 0px rgba(30, 41, 59, 0.14);
  --shadow-2xl: 0px 25px 60px 0px rgba(30, 41, 59, 0.16);

  /* Sombra de color brand */
  --shadow-brand: 0px 8px 24px 0px rgba(14, 119, 135, 0.30);

  /* ============================================
     TAMAÑOS DE ICONOS
     ============================================ */

  --icon-xs:  12px;
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;
   --icon-xl:  32px;
  --icon-2xl: 40px;
  --icon-3xl: 48px;

  /* ============================================
     BREAKPOINTS (referencia, usar en media queries)
     ============================================ */
  /* mobile:  < 640px  */
  /* tablet:  640px – 1024px */
  /* desktop: > 1024px */

  /* ============================================
     TRANSICIONES
     ============================================ */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
     Z-INDEX
     ============================================ */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ============================================
     CONTENEDORES
     ============================================ */

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --container-padding: var(--spacing-md);
}