/* ==========================================================================
   Design Tokens — Lectura Paralela
   ========================================================================== */

:root {
  /* ---- Colours ---- */
  --color-bg:            #FAFAF9;
  --color-bg-reader:     #FFFDF7;
  --color-surface:       #FFFFFF;
  --color-text:          #1C1917;
  --color-text-secondary:#78716C;
  --color-text-light:    #A8A29E;
  --color-border:        #E7E5E4;
  --color-border-light:  #F5F5F4;

  /* Level colours (muted earth tones) */
  --color-a1:            #4D8B5F;
  --color-a1-light:      #EFF6F1;
  --color-a2:            #5E7EA3;
  --color-a2-light:      #EFF3F8;
  --color-b1:            #A68329;
  --color-b1-light:      #F9F3E4;
  --color-b2:            #A35050;
  --color-b2-light:      #FAF0F0;

  /* Genre tints */
  --tint-slice-of-life:  #FEF7ED;
  --tint-comedy:         #FFFBEB;
  --tint-romance:        #FDF2F8;
  --tint-mystery:        #F0F9FF;
  --tint-sci-fi:         #F5F3FF;
  --tint-adventure:      #ECFDF5;
  --tint-drama:          #FFF7ED;
  --tint-fantasy:        #FAF5FF;
  --tint-horror:         #F8FAFC;

  /* Phase accent colours (situaciones) */
  --phase-arriving:              #8B6F47;
  --phase-arriving-light:        #FBF5EE;
  --phase-getting-around:        #5B7A6B;
  --phase-getting-around-light:  #F0F6F2;
  --phase-eating-out:            #C4733B;
  --phase-eating-out-light:      #FEF4ED;
  --phase-problems:              #9B5B5B;
  --phase-problems-light:        #FAF0F0;
  --phase-shopping:              #6B7B9B;
  --phase-shopping-light:        #F0F3F8;
  --phase-socialising:           #8B7B5B;
  --phase-socialising-light:     #F8F5EE;
  --phase-daily-life:            #7B8B6B;
  --phase-daily-life-light:      #F3F6F0;
  --phase-healthcare:            #5B8B9B;
  --phase-healthcare-light:      #EEF6F8;

  /* Accent */
  --color-accent:        #D97706;
  --color-accent-light:  #FEF3C7;

  /* Tooltip */
  --color-tooltip-bg:    #1C1917;
  --color-tooltip-text:  #FAFAF9;

  /* ---- Typography ---- */
  --font-heading:        'DM Serif Display', Georgia, serif;
  --font-ui:             'Inter', system-ui, -apple-system, sans-serif;
  --font-reading:        'Literata', Georgia, serif;

  /* ---- Spacing ---- */
  --space-xs:            4px;
  --space-sm:            8px;
  --space-md:            16px;
  --space-lg:            24px;
  --space-xl:            32px;
  --space-2xl:           48px;
  --space-3xl:           64px;

  /* ---- Sizing ---- */
  --max-width:           960px;
  --max-width-reader:    720px;
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-pill:         100px;

  /* ---- Shadows ---- */
  --shadow-sm:           0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:           0 8px 24px rgba(0,0,0,0.12);
  --shadow-card:         0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover:   0 4px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.03);

  /* ---- Transitions ---- */
  --ease-out:            cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast:     150ms var(--ease-out);
  --transition-normal:   250ms var(--ease-out);

  /* ---- Reader text sizes (default = small) ---- */
  --spanish-size:        20px;
  --spanish-lh:          1.65;
  --english-size:        14px;
  --english-lh:          1.6;
  --gap:                 32px;

  /* ---- Z-index layers ---- */
  --z-tooltip:           100;
  --z-topbar:            50;
  --z-overlay:           40;
}