/**
 * SunoPadho — Design Tokens
 * Single source of truth for color palette, typography, shadows, spacing, and transitions.
 * Derived directly from official logo.png:
 *   - Brand Navy / Midnight Slate: #0B1E28
 *   - Rich Emerald Forest Green: #0B5D3B
 *   - Soft Editorial Canvas: #FBFBF9
 */

:root {
  /* ==========================================================================
     BRAND COLOR PALETTE (From logo.png)
     ========================================================================== */
  
  /* Primary Navy / Slate (Suno / Listen brand core) */
  --sp-navy-950: #040D12;
  --sp-navy-900: #07151D;
  --sp-navy-850: #0B1E28; /* Base Logo Navy */
  --sp-navy-800: #0F2836;
  --sp-navy-700: #17384A;
  --sp-navy-600: #234D63;
  --sp-navy-500: #336680;
  --sp-navy-300: #7DA6BC;
  --sp-navy-100: #DBE7EE;
  --sp-navy-50:  #F0F5F8;

  /* Primary Emerald Forest Green (Padho / Read brand core) */
  --sp-emerald-950: #042114;
  --sp-emerald-900: #073822;
  --sp-emerald-850: #0B5D3B; /* Base Logo Emerald */
  --sp-emerald-800: #0E6B44;
  --sp-emerald-700: #128253;
  --sp-emerald-600: #169E65;
  --sp-emerald-500: #1DB877;
  --sp-emerald-300: #70DCAB;
  --sp-emerald-100: #D8F5E8;
  --sp-emerald-50:  #EEFAF4;

  /* Accent Amber / Gold (Subtle, warm, non-tacky editorial accent) */
  --sp-amber-600: #B87314;
  --sp-amber-500: #D98918;
  --sp-amber-400: #EFA636;
  --sp-amber-100: #FEF3D6;
  --sp-amber-50:  #FFF9EC;

  /* Neutral Surface & Canvas */
  --sp-canvas:         #FBFBF9; /* Warm off-white editorial paper */
  --sp-surface-pure:   #FFFFFF;
  --sp-surface-card:   #FFFFFF;
  --sp-surface-subtle: #F4F6F8;
  --sp-surface-hover:  #ECEFF2;
  --sp-surface-dark:   #0B1E28;
  --sp-surface-darker: #061117;

  /* Text & Typography Colors */
  --sp-text-primary:   #0B1E28;
  --sp-text-secondary: #4A5D68;
  --sp-text-tertiary:  #7E919C;
  --sp-text-inverse:   #FFFFFF;
  --sp-text-emerald:   #0B5D3B;

  /* Borders & Dividers */
  --sp-border-subtle:  #EAEEF1;
  --sp-border-default: #DCE3E8;
  --sp-border-strong:  #B5C4CD;
  --sp-border-focus:   #0B5D3B;

  /* Semantic Feedback */
  --sp-success: #0E8A54;
  --sp-warning: #D98918;
  --sp-error:   #D93838;
  --sp-info:    #1E73BE;

  /* ==========================================================================
     TYPOGRAPHY SCALE & FONT STACKS
     ========================================================================== */
  --sp-font-sans: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --sp-font-serif: 'Lora', 'Georgia', serif;
  --sp-font-urdu: 'Noto Nastaliq Urdu', 'Gulzar', 'Noto Sans Arabic', serif;
  --sp-font-hindi: 'Noto Sans Devanagari', 'Rozha One', 'Mukta', sans-serif;
  --sp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --sp-text-xs:   0.75rem;     /* 12px */
  --sp-text-sm:   0.875rem;    /* 14px */
  --sp-text-base: 1rem;        /* 16px */
  --sp-text-md:   1.125rem;    /* 18px */
  --sp-text-lg:   1.25rem;     /* 20px */
  --sp-text-xl:   1.5rem;      /* 24px */
  --sp-text-2xl:  1.875rem;    /* 30px */
  --sp-text-3xl:  2.25rem;     /* 36px */
  --sp-text-4xl:  3rem;        /* 48px */
  --sp-text-5xl:  3.75rem;     /* 60px */

  --sp-leading-tight: 1.2;
  --sp-leading-normal: 1.5;
  --sp-leading-relaxed: 1.75;
  --sp-leading-loose: 2.0;

  /* ==========================================================================
     SPACING & SIZING
     ========================================================================== */
  --sp-space-1:  0.25rem;  /* 4px */
  --sp-space-2:  0.5rem;   /* 8px */
  --sp-space-3:  0.75rem;  /* 12px */
  --sp-space-4:  1rem;     /* 16px */
  --sp-space-5:  1.25rem;  /* 20px */
  --sp-space-6:  1.5rem;   /* 24px */
  --sp-space-8:  2rem;     /* 32px */
  --sp-space-10: 2.5rem;   /* 40px */
  --sp-space-12: 3rem;     /* 48px */
  --sp-space-16: 4rem;     /* 64px */
  --sp-space-20: 5rem;     /* 80px */

  /* Containers */
  --sp-container-sm: 640px;
  --sp-container-md: 860px;
  --sp-container-lg: 1140px;
  --sp-container-xl: 1320px;
  --sp-container-reader: 720px;

  /* Border Radii */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 8px;
  --sp-radius-md: 12px;
  --sp-radius-lg: 16px;
  --sp-radius-xl: 24px;
  --sp-radius-full: 9999px;

  /* Shadows (Subtle, layered, non-muddy) */
  --sp-shadow-xs: 0 1px 2px rgba(11, 30, 40, 0.04);
  --sp-shadow-sm: 0 2px 4px rgba(11, 30, 40, 0.06), 0 1px 2px rgba(11, 30, 40, 0.03);
  --sp-shadow-md: 0 4px 12px rgba(11, 30, 40, 0.08), 0 2px 4px rgba(11, 30, 40, 0.04);
  --sp-shadow-lg: 0 12px 28px rgba(11, 30, 40, 0.12), 0 4px 8px rgba(11, 30, 40, 0.06);
  --sp-shadow-xl: 0 24px 48px rgba(11, 30, 40, 0.16), 0 8px 16px rgba(11, 30, 40, 0.08);
  --sp-shadow-book: 0 12px 24px -6px rgba(11, 30, 40, 0.22), 0 4px 8px rgba(11, 30, 40, 0.1);

  /* Transitions */
  --sp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --sp-z-base: 1;
  --sp-z-dropdown: 100;
  --sp-z-sticky: 500;
  --sp-z-mini-player: 800;
  --sp-z-bottom-nav: 900;
  --sp-z-modal-backdrop: 1000;
  --sp-z-modal: 1010;
  --sp-z-full-player: 1020;
  --sp-z-toast: 1100;
}

/* ==========================================================================
   READER THEMES (Calibrated for Eye Comfort)
   ========================================================================== */

/* Light Theme (Crisp Editorial Paper) */
[data-reader-theme="light"] {
  --reader-bg: #FFFFFF;
  --reader-surface: #F8FAF9;
  --reader-text: #1C272C;
  --reader-muted: #5E727D;
  --reader-border: #E8EEF1;
  --reader-highlight-bg: #DDF3E8;
  --reader-highlight-text: #08432A;
  --reader-highlight-border: #0B5D3B;
}

/* Sepia Theme (Warm Natural Book Page) */
[data-reader-theme="sepia"] {
  --reader-bg: #F4EEDC;
  --reader-surface: #EAE3CF;
  --reader-text: #3D3021;
  --reader-muted: #73634F;
  --reader-border: #DFD6BE;
  --reader-highlight-bg: #E4D8B4;
  --reader-highlight-text: #261D12;
  --reader-highlight-border: #8D6E3F;
}

/* Dark Theme (Deep OLED Slate Charcoal) */
[data-reader-theme="dark"] {
  --reader-bg: #0B1318;
  --reader-surface: #121F27;
  --reader-text: #E1E8EC;
  --reader-muted: #8FA2AD;
  --reader-border: #1E313D;
  --reader-highlight-bg: #123B2A;
  --reader-highlight-text: #6FE3AC;
  --reader-highlight-border: #1DB877;
}

/* ==========================================================================
   SENIOR-FRIENDLY ACCESSIBILITY MODE
   ========================================================================== */
body.senior-mode {
  --sp-text-xs:   0.95rem;
  --sp-text-sm:   1.05rem;
  --sp-text-base: 1.25rem;
  --sp-text-md:   1.35rem;
  --sp-text-lg:   1.5rem;
  --sp-text-xl:   1.75rem;
  --sp-text-2xl:  2.1rem;
  --sp-text-3xl:  2.6rem;

  --sp-border-default: #8FA3AF;
  --sp-text-secondary: #24353E;
  --sp-text-tertiary:  #3A4E58;
}