/* ══════════════════════════════════════════════
   MemoriPress — Design System & Global Styles
   Palette: Golden #F6BD60 · Cream #F7EDE2 ·
   Pink #F5CAC3 · Sage #84A59D · Coral #F28482
   ══════════════════════════════════════════════ */

/* ── CSS Custom Properties (Light Theme) ── */

:root {
  /* Colors */
  --color-primary: #84A59D;
  --color-primary-hover: #6B8F86;
  --color-success: #6B9E6B;
  --color-success-hover: #5A8A5A;
  --color-danger: #F28482;
  --color-danger-hover: #E06B69;
  --color-warning: #E5A840;

  /* Surfaces */
  --bg-primary: #FAFAFA;
  --bg-secondary: #F7F4F1;
  --bg-tertiary: #F0EDEA;
  --bg-elevated: #FFFFFF;
  --bg-inset: #EBE7E3;

  /* Text */
  --text-primary: #2D2926;
  --text-secondary: #5C5552;
  --text-muted: #9B9490;
  --text-inverse: #FFFFFF;

  /* Borders */
  --border-default: #DDD8D3;
  --border-hover: #84A59D;
  --border-focus: var(--color-primary);

  /* Primary opacity variants */
  --color-primary-bg: rgba(132, 165, 157, 0.04);
  --color-primary-subtle: rgba(132, 165, 157, 0.1);
  --color-primary-muted: rgba(132, 165, 157, 0.15);
  --color-primary-ring: rgba(132, 165, 157, 0.25);
  --color-primary-glow: rgba(132, 165, 157, 0.35);
  --color-primary-medium: rgba(132, 165, 157, 0.6);
  --color-primary-bright: rgba(132, 165, 157, 0.7);
  --color-primary-active: #577A71;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #84A59D, #6B8F86);
  --gradient-primary-hover: linear-gradient(135deg, #6B8F86, #577A71);

  /* Danger opacity variants */
  --color-danger-subtle: rgba(242, 132, 130, 0.1);
  --color-danger-border: rgba(242, 132, 130, 0.2);
  --color-danger-border-strong: rgba(242, 132, 130, 0.3);
  --color-danger-solid: rgba(242, 132, 130, 0.85);
  --color-danger-bg-hover: rgba(242, 132, 130, 0.2);

  /* Success opacity variant */
  --color-success-subtle: rgba(107, 158, 107, 0.1);

  /* Overlays */
  --overlay-lightest: rgba(0, 0, 0, 0.15);
  --overlay-lighter: rgba(0, 0, 0, 0.2);
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.35);
  --overlay-strong: rgba(0, 0, 0, 0.4);
  --overlay-dark: rgba(0, 0, 0, 0.45);
  --overlay-darker: rgba(0, 0, 0, 0.5);
  --overlay-heavy: rgba(0, 0, 0, 0.7);
  --overlay-opaque: rgba(0, 0, 0, 1);

  /* Content on dark overlays */
  --icon-on-dark: rgba(255, 255, 255, 0.85);
  --border-on-dark: rgba(255, 255, 255, 0.4);
  --border-on-dark-strong: rgba(255, 255, 255, 0.7);
  --color-surface-hover: rgba(255, 255, 255, 0.03);

  /* Miscellaneous */
  --color-resize-grip: rgba(128, 128, 128, 0.8);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(45,36,23,0.06);
  --shadow-md: 0 4px 6px -1px rgba(45,36,23,0.08), 0 2px 4px -2px rgba(45,36,23,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(45,36,23,0.1), 0 4px 6px -4px rgba(45,36,23,0.05);
  --shadow-focus: 0 0 0 3px rgba(132,165,157,0.2);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Layout */
  --max-width: 960px;
  --header-height: 56px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ── Dark Mode (explicit) ── */

[data-theme="dark"] {
  --color-primary: #84A59D;
  --color-primary-hover: #A0B5AF;
  --color-warning: #F6BD60;

  --color-primary-bg: rgba(132, 165, 157, 0.06);
  --color-primary-subtle: rgba(132, 165, 157, 0.12);
  --color-primary-muted: rgba(132, 165, 157, 0.15);
  --color-primary-ring: rgba(132, 165, 157, 0.25);
  --color-primary-glow: rgba(132, 165, 157, 0.35);
  --color-primary-medium: rgba(132, 165, 157, 0.6);
  --color-primary-bright: rgba(132, 165, 157, 0.8);
  --color-primary-active: #6B8F86;

  --gradient-primary: linear-gradient(135deg, #84A59D, #A0B5AF);
  --gradient-primary-hover: linear-gradient(135deg, #6B8F86, #84A59D);

  --color-danger-subtle: rgba(242, 132, 130, 0.12);
  --color-danger-border: rgba(242, 132, 130, 0.25);
  --color-danger-border-strong: rgba(242, 132, 130, 0.35);
  --color-danger-solid: rgba(242, 132, 130, 0.85);
  --color-danger-bg-hover: rgba(242, 132, 130, 0.25);

  --color-success-subtle: rgba(107, 158, 107, 0.12);

  --overlay-lightest: rgba(0, 0, 0, 0.25);
  --overlay-lighter: rgba(0, 0, 0, 0.3);
  --overlay-light: rgba(0, 0, 0, 0.4);
  --overlay-medium: rgba(0, 0, 0, 0.45);
  --overlay-strong: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.55);
  --overlay-darker: rgba(0, 0, 0, 0.6);
  --overlay-heavy: rgba(0, 0, 0, 0.75);
  --overlay-opaque: rgba(0, 0, 0, 1);

  --color-resize-grip: rgba(128, 128, 128, 0.6);

  --bg-primary: #1A2421;
  --bg-secondary: #222E2B;
  --bg-tertiary: #2D3B37;
  --bg-elevated: #222E2B;
  --bg-inset: #1A2421;

  --text-primary: #F0EDEA;
  --text-secondary: #A0B5AF;
  --text-muted: #6B8F86;

  --border-default: #2D3B37;
  --border-hover: #84A59D;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
  --shadow-focus: 0 0 0 3px rgba(132,165,157,0.2);
}

/* ── Dark Mode (system preference) ── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #84A59D;
    --color-primary-hover: #A0B5AF;
    --color-warning: #F6BD60;

    --color-primary-bg: rgba(132, 165, 157, 0.06);
    --color-primary-subtle: rgba(132, 165, 157, 0.12);
    --color-primary-muted: rgba(132, 165, 157, 0.15);
    --color-primary-ring: rgba(132, 165, 157, 0.25);
    --color-primary-glow: rgba(132, 165, 157, 0.35);
    --color-primary-medium: rgba(132, 165, 157, 0.6);
    --color-primary-bright: rgba(132, 165, 157, 0.8);
    --color-primary-active: #6B8F86;

    --gradient-primary: linear-gradient(135deg, #84A59D, #A0B5AF);
    --gradient-primary-hover: linear-gradient(135deg, #6B8F86, #84A59D);

    --color-danger-subtle: rgba(242, 132, 130, 0.12);
    --color-danger-border: rgba(242, 132, 130, 0.25);
    --color-danger-border-strong: rgba(242, 132, 130, 0.35);
    --color-danger-solid: rgba(242, 132, 130, 0.85);
    --color-danger-bg-hover: rgba(242, 132, 130, 0.25);

    --color-success-subtle: rgba(107, 158, 107, 0.12);

    --overlay-lightest: rgba(0, 0, 0, 0.25);
    --overlay-lighter: rgba(0, 0, 0, 0.3);
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-medium: rgba(0, 0, 0, 0.45);
    --overlay-strong: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.55);
    --overlay-darker: rgba(0, 0, 0, 0.6);
    --overlay-heavy: rgba(0, 0, 0, 0.75);
    --overlay-opaque: rgba(0, 0, 0, 1);

    --color-resize-grip: rgba(128, 128, 128, 0.6);

    --bg-primary: #1A2421;
    --bg-secondary: #222E2B;
    --bg-tertiary: #2D3B37;
    --bg-elevated: #222E2B;
    --bg-inset: #1A2421;

    --text-primary: #F0EDEA;
    --text-secondary: #A0B5AF;
    --text-muted: #6B8F86;

    --border-default: #2D3B37;
    --border-hover: #84A59D;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
    --shadow-focus: 0 0 0 3px rgba(132,165,157,0.2);
  }
}