/* pindu Brand Theme - Sophisticated Editorial Palette */

:root {
  /* ===== BASE COLOR PALETTE ===== */

  /* Neutrals */
  --lightest: #FFFFFF;      /* Pure white */
  --lighter: #F5F5F5;       /* Bright off-white (reads on dark) */
  --light: #b0b0b0;         /* Muted off-white for dark mode secondary */
  --dark: #5a6f70;          /* Muted off-black for light mode secondary */
  --darker: #122A2B;        /* Dark off-black (reads on light) */
  --darkest: #000000;       /* Pure black */

  /* Accented Neutrals */
  --off-light: #E4DCCC;           /* Off-White (Warm Cream) */
  --off-dark: #122A2B;            /* Off-Black (Dark Teal) */

  /* Accent Colors */
  --teal-primary: #3BA5A0;       /* Teal - primary accent */
  --teal-dark: #1F827D;          /* Darker teal for hover states */
  --teal-light: #A7DCD9;         /* Lighter teal for dark mode */
  --terracotta-primary: #B36743; /* Terracotta - secondary accent */
  --terracotta-light: #ba7f63;   /* Lighter terracotta */
  --terracotta-lighter: #D99679; /* Even lighter for dark mode */

  /* ===== NUANCED COLOR PALETTE ===== */

  /* Border colors */
  --border-light: rgba(245, 245, 245, 0.12);  /* Subtle border on dark */
  --border-dark: rgba(18, 42, 43, 0.12);      /* Subtle border on light */

  /* Overlay base colors - Light mode */
  --overlay-light-50: rgba(228, 220, 204, 0.50);
  --overlay-light-70: rgba(228, 220, 204, 0.70);
  --overlay-light-85: rgba(228, 220, 204, 0.85);
  --overlay-light-90: rgba(228, 220, 204, 0.90);
  --overlay-light-95: rgba(228, 220, 204, 0.95);
  --overlay-light-lighter: rgba(255, 255, 255, 0.70);

  /* Overlay base colors - Dark mode */
  --overlay-dark-60: rgba(18, 42, 43, 0.60);
  --overlay-dark-70: rgba(18, 42, 43, 0.70);
  --overlay-dark-85: rgba(18, 42, 43, 0.85);
  --overlay-dark-95: rgba(18, 42, 43, 0.95);
  --overlay-dark-lighter: rgba(40, 70, 72, 0.75);  /* Lighter for contrast */

  /* Shadow base colors */
  --shadow-light: 0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-light-hover: 0 4px 12px rgba(15, 23, 42, 0.15);
  --shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-dark-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Status Colors */
  --success: #8FAE8D;      /* Soft Sage */
  --success-bg: rgba(143, 174, 141, 0.1);
  --success-border: rgba(143, 174, 141, 0.3);
  --error: #C85C5C;        /* Alert Red */
  --error-bg: rgba(200, 92, 92, 0.1);
  --error-border: rgba(200, 92, 92, 0.3);

  /* ===== THEME VARIABLES (Light Mode Default) ===== */

  /* Background & Surface */
  --bg: var(--off-light);
  --border: var(--border-dark);

  /* Text */
  --text: var(--darker);
  --muted: var(--dark);

  /* Brand Colors */
  --brand: var(--teal-primary);
  --brand-dark: var(--teal-dark);
  --brand-light: var(--teal-light);
  --accent: var(--terracotta-primary);
  --accent-light: var(--terracotta-light);

  /* Semi-transparent overlays */
  --overlay-header: var(--overlay-light-85);
  --overlay-footer: var(--overlay-light-70);
  --overlay-surface: var(--overlay-light-lighter);
  --overlay-menu: var(--overlay-light-95);
  --overlay-gradient-top: var(--overlay-light-90);
  --overlay-gradient-mid: var(--overlay-light-50);
  --overlay-gradient-bottom: var(--overlay-light-90);

  /* Shadows */
  --shadow: var(--shadow-light);
  --shadow-hover: var(--shadow-light-hover);

  /* ===== SPACING ===== */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 80px;

  /* ===== TYPOGRAPHY ===== */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 2.2rem;
  --font-size-3xl: 3.2rem;

  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-tight: 0.12em;
  --letter-spacing-normal: 0.2px;

  --line-height-tight: 1.25;
  --line-height-normal: 1.6;

  /* ===== LAYOUT ===== */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.15);

  --content-width-narrow: 800px;
  --content-width-wide: 1400px;
  --section-padding-max: 100px;

  --z-sticky: 10;

  --icon-size-sm: 18px;
  --icon-size-md: 24px;
  --icon-size-lg: 28px;
  --icon-size-numbered: 32px;

  /* Numbered list styling */
  --numbered-circle-bg: var(--brand);
  --numbered-circle-text: var(--lightest);

  /* ===== EFFECTS ===== */
  --backdrop-blur-sm: saturate(160%) blur(6px);
  --backdrop-blur-lg: saturate(180%) blur(8px);

  --transition-fast: 0.2s;

  --outline-width: 2px;
  --outline-offset: 2px;
}

/* Auto dark mode via system preference */
@media (prefers-color-scheme: dark) {
  :root {
    /* Background & Surface */
    --bg: var(--off-dark);
    --border: var(--border-light);
    --shadow: var(--shadow-dark);
    --shadow-hover: var(--shadow-dark-hover);

    /* Semi-transparent overlays */
    --overlay-header: var(--overlay-dark-85);
    --overlay-footer: var(--overlay-dark-70);
    --overlay-surface: var(--overlay-dark-lighter);
    --overlay-menu: var(--overlay-dark-95);
    --overlay-gradient-top: var(--overlay-dark-95);
    --overlay-gradient-mid: var(--overlay-dark-60);
    --overlay-gradient-bottom: var(--overlay-dark-95);

    /* Text */
    --text: var(--lighter);
    --muted: var(--light);

    /* Brand Colors - Lighter variants for dark mode */
    --brand: var(--teal-light);
    --brand-dark: var(--teal-primary);
    --accent: var(--terracotta-lighter);
    --accent-light: var(--terracotta-primary);
  }
}

/* Manual theme overrides (when user toggles) */
html.theme-dark {
  /* Background & Surface */
  --bg: var(--off-dark);
  --border: var(--border-light);
  --shadow: var(--shadow-dark);
  --shadow-hover: var(--shadow-dark-hover);

  /* Semi-transparent overlays */
  --overlay-header: var(--overlay-dark-85);
  --overlay-footer: var(--overlay-dark-70);
  --overlay-surface: var(--overlay-dark-lighter);
  --overlay-menu: var(--overlay-dark-95);
  --overlay-gradient-top: var(--overlay-dark-95);
  --overlay-gradient-mid: var(--overlay-dark-60);
  --overlay-gradient-bottom: var(--overlay-dark-95);

  /* Text */
  --text: var(--lighter);
  --muted: var(--light);

  /* Brand Colors - Lighter variants for dark mode */
  --brand: var(--teal-light);
  --brand-dark: var(--teal-primary);
  --accent: var(--terracotta-lighter);
  --accent-light: var(--terracotta-primary);
}

html.theme-light {
  /* Background & Surface */
  --bg: var(--off-light);
  --border: var(--border-dark);
  --shadow: var(--shadow-light);
  --shadow-hover: var(--shadow-light-hover);

  /* Text */
  --text: var(--darker);
  --muted: var(--dark);

  /* Brand Colors */
  --brand: var(--teal-primary);
  --brand-dark: var(--teal-dark);
  --accent: var(--terracotta-primary);
  --accent-light: var(--terracotta-light);

  /* Semi-transparent overlays */
  --overlay-header: var(--overlay-light-85);
  --overlay-footer: var(--overlay-light-70);
  --overlay-surface: var(--overlay-light-lighter);
  --overlay-menu: var(--overlay-light-95);
  --overlay-gradient-top: var(--overlay-light-90);
  --overlay-gradient-mid: var(--overlay-light-50);
  --overlay-gradient-bottom: var(--overlay-light-90);
}