/* =============================================
   BIBLE ALIVE — Design Tokens
   by Orzatty Holdings
   ============================================= */

:root {
  /* ── Color Palette (Beige + Warm Earth Tones) ── */
  
  /* Beige Foundation */
  --color-bg-primary:       #F7F3EC;
  --color-bg-secondary:     #EDE7DC;
  --color-bg-tertiary:      #E3DBD0;
  --color-surface:          #FFFFFF;
  --color-surface-hover:    #FAF8F4;
  --color-surface-active:   #F0ECE4;

  /* Accent — Warm Terracotta / Sienna */
  --color-accent:           #B07448;
  --color-accent-hover:     #965F38;
  --color-accent-light:     #D4A574;
  --color-accent-bg:        rgba(176, 116, 72, 0.08);
  --color-accent-bg-hover:  rgba(176, 116, 72, 0.14);

  /* Text */
  --color-text-primary:     #2C2520;
  --color-text-secondary:   #6B6158;
  --color-text-tertiary:    #97908A;
  --color-text-inverse:     #F7F3EC;
  --color-text-accent:      #8C5A30;

  /* Borders & Dividers */
  --color-border:           #DDD5C9;
  --color-border-light:     #EAE4DA;
  --color-divider:          #E8E0D4;

  /* Semantic */
  --color-success:          #5E8B6A;
  --color-success-bg:       rgba(94, 139, 106, 0.10);
  --color-warning:          #C4956B;
  --color-warning-bg:       rgba(196, 149, 107, 0.10);
  --color-error:            #C06054;
  --color-error-bg:         rgba(192, 96, 84, 0.10);

  /* Overlay */
  --color-overlay:          rgba(44, 37, 32, 0.45);
  --color-scrim:            rgba(44, 37, 32, 0.20);

  /* Verse Highlight */
  --color-highlight:        rgba(176, 116, 72, 0.12);
  --color-highlight-active: rgba(176, 116, 72, 0.22);
  --color-bookmark:         #B07448;

  /* ── Typography ── */
  --font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-scripture:    'Lora', 'Georgia', 'Times New Roman', serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Fluid Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* Scripture reading size (user adjustable) */
  --scripture-size: 1.125rem;
  --scripture-line-height: 1.9;

  /* Font Weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ── Spacing ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Layout ── */
  --sidebar-width:     300px;
  --topbar-height:     56px;
  --bottomnav-height:  64px;
  --reader-max-width:  720px;
  --content-padding:   var(--space-6);

  /* ── Borders ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(44, 37, 32, 0.05);
  --shadow-sm:    0 1px 3px rgba(44, 37, 32, 0.08), 0 1px 2px rgba(44, 37, 32, 0.04);
  --shadow-md:    0 4px 6px rgba(44, 37, 32, 0.06), 0 2px 4px rgba(44, 37, 32, 0.04);
  --shadow-lg:    0 10px 15px rgba(44, 37, 32, 0.06), 0 4px 6px rgba(44, 37, 32, 0.03);
  --shadow-xl:    0 20px 25px rgba(44, 37, 32, 0.08), 0 8px 10px rgba(44, 37, 32, 0.03);
  --shadow-inner: inset 0 2px 4px rgba(44, 37, 32, 0.04);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Z-Index Scale ── */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
}

/* =============================================
   DARK THEME — Warm Dark (not pure black)
   ============================================= */
[data-theme="dark"] {
  --color-bg-primary:       #1A1714;
  --color-bg-secondary:     #221F1B;
  --color-bg-tertiary:      #2C2823;
  --color-surface:          #2A2621;
  --color-surface-hover:    #332E29;
  --color-surface-active:   #3B3530;

  --color-accent:           #D4A574;
  --color-accent-hover:     #E0B88E;
  --color-accent-light:     #B07448;
  --color-accent-bg:        rgba(212, 165, 116, 0.10);
  --color-accent-bg-hover:  rgba(212, 165, 116, 0.16);

  --color-text-primary:     #E8E0D4;
  --color-text-secondary:   #A69E94;
  --color-text-tertiary:    #706860;
  --color-text-inverse:     #1A1714;
  --color-text-accent:      #D4A574;

  --color-border:           #3B3530;
  --color-border-light:     #332E29;
  --color-divider:          #332E29;

  --color-overlay:          rgba(0, 0, 0, 0.55);
  --color-scrim:            rgba(0, 0, 0, 0.30);

  --color-highlight:        rgba(212, 165, 116, 0.10);
  --color-highlight-active: rgba(212, 165, 116, 0.20);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.20), 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.10);
}

/* =============================================
   SEPIA MODE — Extra warm reading
   ============================================= */
[data-theme="sepia"] {
  --color-bg-primary:       #F4EBDB;
  --color-bg-secondary:     #E8DDCA;
  --color-bg-tertiary:      #DDD0BC;
  --color-surface:          #FAF4E8;
  --color-surface-hover:    #F0E8D8;
  --color-surface-active:   #E8DDC8;

  --color-text-primary:     #3C3224;
  --color-text-secondary:   #6B5D4C;
  --color-text-tertiary:    #8A7E6E;
}