/*
 * ==========================================================================
 * NOVELLA NIGHTMARES — DESIGN TOKENS
 * All CSS custom properties. Theme overrides via [data-theme] attribute.
 * ==========================================================================
 */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ==========================================================================
   DARK THEME — Default
   ========================================================================== */
:root {
  /* --- Backgrounds --- */
  --color-bg-primary:      #070a0d;
  --color-bg-secondary:    #0d1117;
  --color-bg-tertiary:     #111820;
  --color-bg-elevated:     #161e28;
  --color-bg-card:         rgba(13, 17, 23, 0.90);
  --color-bg-card-hover:   rgba(22, 30, 40, 0.97);
  --color-bg-overlay:      rgba(7, 10, 13, 0.75);

  /* --- Atmospheric Teal (constant across dark themes) --- */
  --color-atm-deep:        #071515;
  --color-atm-mid:         #0d2828;
  --color-atm-bright:      #1a4444;
  --color-atm-highlight:   #2a6060;
  --color-fog:             rgba(20, 60, 60, 0.12);

  /* --- Accent — Crimson (swappable) --- */
  --color-accent:          #8b1a1a;
  --color-accent-mid:      #a82020;
  --color-accent-bright:   #c0392b;
  --color-accent-glow:     rgba(192, 57, 43, 0.35);
  --color-accent-subtle:   rgba(192, 57, 43, 0.10);
  --color-accent-text:     #e05040;

  /* --- Text --- */
  --color-text-primary:    #e8e4dd;
  --color-text-secondary:  #9ba5b0;
  --color-text-muted:      #5a6470;
  --color-text-accent:     var(--color-accent-text);
  --color-text-inverse:    #070a0d;

  /* --- Borders --- */
  --color-border:          rgba(255, 255, 255, 0.07);
  --color-border-mid:      rgba(255, 255, 255, 0.13);
  --color-border-accent:   rgba(192, 57, 43, 0.40);
  --color-border-glow:     rgba(192, 57, 43, 0.65);

  /* --- Typography --- */
  --font-display:    'Cinzel Decorative', serif;
  --font-heading:    'Cinzel', serif;
  --font-body:       'IM Fell English', serif;
  --font-ui:         'Lato', sans-serif;

  --fs-2xs:   0.625rem;   /*  10px */
  --fs-xs:    0.75rem;    /*  12px */
  --fs-sm:    0.875rem;   /*  14px */
  --fs-base:  1rem;       /*  16px */
  --fs-md:    1.125rem;   /*  18px */
  --fs-lg:    1.25rem;    /*  20px */
  --fs-xl:    1.5rem;     /*  24px */
  --fs-2xl:   1.875rem;   /*  30px */
  --fs-3xl:   2.25rem;    /*  36px */
  --fs-4xl:   3rem;       /*  48px */
  --fs-5xl:   3.75rem;    /*  60px */
  --fs-6xl:   4.5rem;     /*  72px */
  --fs-7xl:   6rem;       /*  96px */

  --fw-light:   300;
  --fw-normal:  400;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.60;
  --lh-relaxed: 1.80;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-wider:    0.15em;
  --ls-widest:   0.25em;

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

  /* --- Layout --- */
  --container-sm:   600px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
  --container-max: 1920px;
  --container-pad:  clamp(var(--sp-4), 5vw, var(--sp-16));

  /* --- Border Radius --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.55);
  --shadow-md:   0 4px 14px rgba(0,0,0,0.65);
  --shadow-lg:   0 10px 35px rgba(0,0,0,0.75);
  --shadow-xl:   0 20px 70px rgba(0,0,0,0.85);
  --shadow-glow: 0 0 20px var(--color-accent-glow);
  --shadow-glow-lg: 0 0 50px var(--color-accent-glow), 0 0 100px var(--color-accent-subtle);
  --shadow-atm:  0 0 30px rgba(26, 68, 68, 0.25);

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);

  --dur-fast:   120ms;
  --dur-base:   280ms;
  --dur-slow:   550ms;
  --dur-crawl: 1100ms;

  --transition-base:  var(--dur-base) var(--ease-out);
  --transition-slow:  var(--dur-slow) var(--ease-out);

  /* --- Z-index --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-float:   20;
  --z-overlay: 30;
  --z-modal:   40;
  --z-nav:     50;

  /* --- Hero gradient overlay --- */
  --hero-overlay: linear-gradient(
    180deg,
    rgba(7, 10, 13, 0.30)  0%,
    rgba(7, 10, 13, 0.08) 30%,
    rgba(7, 10, 13, 0.08) 55%,
    rgba(7, 10, 13, 0.70) 80%,
    rgba(7, 10, 13, 1.00) 100%
  );

  /* --- Nav height (used for scroll offsets) --- */
  --nav-height: 72px;
  --nav-height-scrolled: 56px;
}

/* ==========================================================================
   LIGHT THEME  [data-theme="light"]
   ========================================================================== */
[data-theme="light"] {
  --color-bg-primary:      #f2ede4;
  --color-bg-secondary:    #e8e1d5;
  --color-bg-tertiary:     #ddd5c6;
  --color-bg-elevated:     #d4cab8;
  --color-bg-card:         rgba(242, 237, 228, 0.95);
  --color-bg-card-hover:   rgba(232, 225, 213, 0.98);
  --color-bg-overlay:      rgba(242, 237, 228, 0.80);

  --color-atm-deep:        #c4cdc8;
  --color-atm-mid:         #a8b8b0;
  --color-atm-bright:      #8aa89e;
  --color-atm-highlight:   #6a9088;
  --color-fog:             rgba(138, 168, 158, 0.15);

  --color-accent:          #7a1515;
  --color-accent-mid:      #962020;
  --color-accent-bright:   #b02828;
  --color-accent-glow:     rgba(176, 40, 40, 0.20);
  --color-accent-subtle:   rgba(176, 40, 40, 0.08);
  --color-accent-text:     #8b1a1a;

  --color-text-primary:    #1a1a1a;
  --color-text-secondary:  #4a4a50;
  --color-text-muted:      #7a7a84;
  --color-text-accent:     var(--color-accent-text);
  --color-text-inverse:    #f2ede4;

  --color-border:          rgba(0, 0, 0, 0.10);
  --color-border-mid:      rgba(0, 0, 0, 0.18);
  --color-border-accent:   rgba(176, 40, 40, 0.30);
  --color-border-glow:     rgba(176, 40, 40, 0.55);

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.15);
  --shadow-md:   0 4px 14px rgba(0,0,0,0.20);
  --shadow-lg:   0 10px 35px rgba(0,0,0,0.25);
  --shadow-xl:   0 20px 70px rgba(0,0,0,0.30);
  --shadow-atm:  0 0 30px rgba(106, 144, 136, 0.20);

  --hero-overlay: linear-gradient(
    180deg,
    rgba(242, 237, 228, 0.25)  0%,
    rgba(242, 237, 228, 0.05) 35%,
    rgba(242, 237, 228, 0.55) 78%,
    rgba(242, 237, 228, 1.00) 100%
  );
}

/* ==========================================================================
   GREEN THEME — Eerie Green  [data-theme="green"]
   ========================================================================== */
[data-theme="green"] {
  --color-accent:          #0f4a0f;
  --color-accent-mid:      #1a6b1a;
  --color-accent-bright:   #228b22;
  --color-accent-glow:     rgba(34, 139, 34, 0.35);
  --color-accent-subtle:   rgba(34, 139, 34, 0.10);
  --color-accent-text:     #3dba3d;

  --color-border-accent:   rgba(34, 139, 34, 0.40);
  --color-border-glow:     rgba(34, 139, 34, 0.65);

  --shadow-glow:    0 0 20px var(--color-accent-glow);
  --shadow-glow-lg: 0 0 50px var(--color-accent-glow), 0 0 100px var(--color-accent-subtle);
}

/* ==========================================================================
   BLUE THEME — Spectral Blue  [data-theme="blue"]
   ========================================================================== */
[data-theme="blue"] {
  --color-accent:          #0f2f5a;
  --color-accent-mid:      #1a4a8a;
  --color-accent-bright:   #2563b0;
  --color-accent-glow:     rgba(37, 99, 176, 0.35);
  --color-accent-subtle:   rgba(37, 99, 176, 0.10);
  --color-accent-text:     #5b9fe0;

  --color-border-accent:   rgba(37, 99, 176, 0.40);
  --color-border-glow:     rgba(37, 99, 176, 0.65);

  --shadow-glow:    0 0 20px var(--color-accent-glow);
  --shadow-glow-lg: 0 0 50px var(--color-accent-glow), 0 0 100px var(--color-accent-subtle);
}