/* =====================================================================
   Tokens de diseno
   Direccion: iOS nativo (tipografia SF, listas agrupadas, blur de barras)
   con los acentos de Instagram (anillo degradado, azul de accion).
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------- tipografia */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-num: -apple-system, "SF Pro Display", "Segoe UI Variable Display", system-ui, sans-serif;

  --t-large:    2.125rem;  /* 34 · titulo grande de pantalla */
  --t-title:    1.75rem;   /* 28 */
  --t-title2:   1.375rem;  /* 22 */
  --t-title3:   1.25rem;   /* 20 */
  --t-headline: 1.0625rem; /* 17 semibold */
  --t-body:     1.0625rem; /* 17 */
  --t-callout:  1rem;      /* 16 */
  --t-sub:      0.9375rem; /* 15 */
  --t-foot:     0.8125rem; /* 13 */
  --t-caption:  0.75rem;   /* 12 */
  --t-micro:    0.6875rem; /* 11 */

  /* ---------------------------------------------------------- ritmo */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 44px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- movimiento */
  --fast: 140ms;
  --mid: 260ms;
  --slow: 420ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);        /* curva de hojas iOS */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* rebote corto */

  /* ---------------------------------------------------------- barras */
  --nav-h: 52px;
  --tab-h: 54px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------------------------------------------------------- acentos fijos */
  --ig-gradient: linear-gradient(135deg, #F9CE34 0%, #EE2A7B 52%, #6228D7 100%);
  --ig-gradient-soft: linear-gradient(135deg, rgba(249,206,52,.16), rgba(238,42,123,.16), rgba(98,40,215,.16));
  --shell-max: 620px;
}

/* ------------------------------------------------------------------ claro */
:root,
:root[data-theme="light"] {
  --bg:          #F2F2F7;
  --bg-blur:     rgba(242,242,247,.82);
  --card:        #FFFFFF;
  --card-2:      #F7F7FA;
  --card-sunken: #EFEFF4;

  --text:        #000000;
  --text-2:      rgba(60,60,67,.62);
  --text-3:      rgba(60,60,67,.34);
  --separator:   rgba(60,60,67,.20);
  --hairline:    rgba(60,60,67,.11);

  --blue:   #007AFF;
  --green:  #34C759;
  --red:    #FF3B30;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --purple: #AF52DE;

  --tint-green:  rgba(52,199,89,.13);
  --tint-red:    rgba(255,59,48,.11);
  --tint-blue:   rgba(0,122,255,.11);
  --tint-orange: rgba(255,149,0,.13);

  --shadow-sheet: 0 -8px 40px rgba(0,0,0,.18);
  --shadow-float: 0 6px 24px rgba(0,0,0,.12);
  --shadow-card:  0 1px 2px rgba(0,0,0,.04);
  --logo-halo:    rgba(0,0,0,.04);
}

/* ------------------------------------------------------------------ oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #000000;
    --bg-blur:     rgba(20,20,22,.78);
    --card:        #1C1C1E;
    --card-2:      #2C2C2E;
    --card-sunken: #121214;

    --text:        #FFFFFF;
    --text-2:      rgba(235,235,245,.62);
    --text-3:      rgba(235,235,245,.32);
    --separator:   rgba(84,84,88,.65);
    --hairline:    rgba(84,84,88,.42);

    --blue:   #0A84FF;
    --green:  #30D158;
    --red:    #FF453A;
    --orange: #FF9F0A;
    --yellow: #FFD60A;
    --purple: #BF5AF2;

    --tint-green:  rgba(48,209,88,.17);
    --tint-red:    rgba(255,69,58,.15);
    --tint-blue:   rgba(10,132,255,.17);
    --tint-orange: rgba(255,159,10,.17);

    --shadow-sheet: 0 -8px 40px rgba(0,0,0,.6);
    --shadow-float: 0 6px 24px rgba(0,0,0,.5);
    --shadow-card:  none;
    --logo-halo:    rgba(255,255,255,.06);
  }
}

:root[data-theme="dark"] {
  --bg:          #000000;
  --bg-blur:     rgba(20,20,22,.78);
  --card:        #1C1C1E;
  --card-2:      #2C2C2E;
  --card-sunken: #121214;

  --text:        #FFFFFF;
  --text-2:      rgba(235,235,245,.62);
  --text-3:      rgba(235,235,245,.32);
  --separator:   rgba(84,84,88,.65);
  --hairline:    rgba(84,84,88,.42);

  --blue:   #0A84FF;
  --green:  #30D158;
  --red:    #FF453A;
  --orange: #FF9F0A;
  --yellow: #FFD60A;
  --purple: #BF5AF2;

  --tint-green:  rgba(48,209,88,.17);
  --tint-red:    rgba(255,69,58,.15);
  --tint-blue:   rgba(10,132,255,.17);
  --tint-orange: rgba(255,159,10,.17);

  --shadow-sheet: 0 -8px 40px rgba(0,0,0,.6);
  --shadow-float: 0 6px 24px rgba(0,0,0,.5);
  --shadow-card:  none;
  --logo-halo:    rgba(255,255,255,.06);
}