/* ══════════════════════════════════════════════
   MemoriPress — Design System & Global Styles
   Warm + Crafted palette
   Terracotta #B5573A · Cream #FBF7F0 · Walnut #2A1F1A
   Tan dividers #E8D9C4 · Surface-warm #F4ECDF
   ══════════════════════════════════════════════ */

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

:root {
  /* ── Marketing/sitewide tokens (mp-*) ──
     Authoritative warm palette. The base tokens below alias these so
     every page in the app inherits the same look. */
  --mp-color-bg: #FBF7F0;          /* warm cream */
  --mp-color-surface: #FFFFFF;     /* card / elevated surface */
  --mp-color-surface-warm: #F4ECDF; /* secondary tinted surface */
  --mp-color-text: #2A1F1A;        /* deep walnut, not pure black */
  --mp-color-text-muted: #6B5D52;  /* warm gray */
  --mp-color-accent: #B5573A;      /* terracotta — brand seed */
  --mp-color-accent-dark: #94431F; /* hover / pressed */
  --mp-color-accent-soft: rgba(181, 87, 58, 0.08);
  --mp-color-divider: #E8D9C4;     /* warm tan, subtle */
  --mp-color-overlay: rgba(42, 31, 26, 0.72);

  /* Marketing typography */
  --mp-font-display: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mp-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mp-font-display-hero: 4rem;
  --mp-font-display-hero-mobile: 2.5rem;
  --mp-font-display-section: 2.5rem;
  --mp-font-display-section-mobile: 2rem;
  --mp-font-display-sub: 1.25rem;
  --mp-font-body-large: 1.125rem;
  --mp-font-body: 1rem;
  --mp-font-caption: 0.75rem;

  /* Marketing spacing */
  --mp-section-y: 7rem;
  --mp-section-y-mobile: 4rem;
  --mp-container: 1180px;
  --mp-container-narrow: 880px;

  /* ── Base tokens (legacy names) — aliased to the warm palette ──
     Existing components keep working: editor selected outlines become
     terracotta, status pills become warm-tan, focus rings become a
     terracotta wash. Renaming all 80+ usages would balloon this PR
     for no UX gain — aliasing is the lowest-risk path. */

  /* Colors */
  --color-primary: #B5573A;        /* terracotta */
  --color-primary-hover: #94431F;
  --color-success: #6B8F5C;        /* sage olive — readable, warm */
  --color-success-hover: #557148;
  --color-danger: #C0492A;         /* deep terra-red, distinct from accent */
  --color-danger-hover: #9D3A1F;
  --color-warning: #C99030;        /* warm amber */

  /* Surfaces */
  --bg-primary: #FBF7F0;           /* cream */
  --bg-secondary: #F4ECDF;         /* warm tinted */
  --bg-tertiary: #EDE0CB;          /* slightly deeper tan */
  --bg-elevated: #FFFFFF;
  --bg-inset: #E8D9C4;

  /* Text */
  --text-primary: #2A1F1A;         /* walnut */
  --text-secondary: #6B5D52;       /* warm gray */
  --text-muted: #9C8A7A;
  --text-inverse: #FBF7F0;

  /* Borders */
  --border-default: #E8D9C4;       /* warm tan */
  --border-color: #E8D9C4;         /* alias used in some legacy CSS */
  --border-hover: #B5573A;
  --border-focus: #B5573A;

  /* Primary (terracotta) opacity variants */
  --color-primary-bg: rgba(181, 87, 58, 0.04);
  --color-primary-subtle: rgba(181, 87, 58, 0.10);
  --color-primary-muted: rgba(181, 87, 58, 0.15);
  --color-primary-ring: rgba(181, 87, 58, 0.25);
  --color-primary-glow: rgba(181, 87, 58, 0.32);
  --color-primary-medium: rgba(181, 87, 58, 0.55);
  --color-primary-bright: rgba(181, 87, 58, 0.70);
  --color-primary-active: #7B2F18;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #B5573A, #94431F);
  --gradient-primary-hover: linear-gradient(135deg, #94431F, #7B2F18);

  /* Danger opacity variants */
  --color-danger-subtle: rgba(192, 73, 42, 0.10);
  --color-danger-border: rgba(192, 73, 42, 0.22);
  --color-danger-border-strong: rgba(192, 73, 42, 0.35);
  --color-danger-solid: rgba(192, 73, 42, 0.85);
  --color-danger-bg-hover: rgba(192, 73, 42, 0.20);

  /* Success opacity variant */
  --color-success-subtle: rgba(107, 143, 92, 0.12);

  /* Status text colors — used for text on subtle danger/success
     backgrounds where the surface tint is too light to carry the
     full danger/success hue. Aliased from the warm palette so the
     auth error/notice and order-status flashes all read the same. */
  --color-danger-text: #7A2A14;
  --color-success-text: #3E5C32;

  /* Stronger divider for input hover/elevated borders. Sits between
     --mp-color-divider (subtle separator) and the deep walnut text. */
  --border-strong: #C9B79C;
  --input-placeholder: #A89683;

  /* Overlays */
  --overlay-lightest: rgba(42, 31, 26, 0.15);
  --overlay-lighter: rgba(42, 31, 26, 0.20);
  --overlay-light: rgba(42, 31, 26, 0.30);
  --overlay-medium: rgba(42, 31, 26, 0.35);
  --overlay-strong: rgba(42, 31, 26, 0.40);
  --overlay-dark: rgba(42, 31, 26, 0.45);
  --overlay-darker: rgba(42, 31, 26, 0.50);
  --overlay-heavy: rgba(42, 31, 26, 0.70);
  --overlay-opaque: rgba(42, 31, 26, 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(42, 31, 26, 0.03);

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

  /* Shadows — warm, not gray */
  --shadow-sm: 0 1px 2px rgba(42, 31, 26, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(42, 31, 26, 0.08), 0 2px 4px -2px rgba(42, 31, 26, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(42, 31, 26, 0.10), 0 4px 6px -4px rgba(42, 31, 26, 0.05);
  --shadow-focus: 0 0 0 3px rgba(181, 87, 58, 0.20);

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

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

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Layout */
  --max-width: 1100px;
  --header-height: 64px;

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

  /* ── Z-index scale ──
     A documented scale for stacking order. Prefer these tokens over
     raw integers in new code. Editor trim guides keep their own
     hardcoded numbers — see preview.css for why. */
  --z-base: 0;
  --z-elevated: 10;        /* hover states, lifted cards */
  --z-sticky: 100;         /* sticky headers, landing nav */
  --z-panel: 500;          /* docked side panels */
  --z-overlay: 1000;       /* modals, dialogs, dropdowns, dragged panels */
  --z-toast: 2000;         /* flash notifications */
  --z-tooltip: 3000;
}

/* ── Dark Mode (explicit) ──
   We keep dark mode supported but tuned to the warm palette: deep
   walnut surfaces, cream text, terracotta accent. Dark mode is rarely
   used by customers — the baseline is the cream day theme. */

[data-theme="dark"] {
  /* Marketing palette — dark-mode counterparts. The new mp-* tokens
     drive every redesigned customer page (auth, legal, order detail,
     account, wizard, landing). Without these overrides, dark-mode
     pages keep the cream/walnut light-mode values and look broken
     against the dark chrome. */
  --mp-color-bg: #1F1815;          /* deep warm walnut */
  --mp-color-surface: #2E2520;     /* card / elevated surface — lifted ~10 ΔL above bg so cards read as elevated */
  --mp-color-surface-warm: #382B23; /* secondary tinted surface */
  --mp-color-text: #F2EAD9;        /* warm cream text */
  --mp-color-text-muted: #C8B7A1;  /* muted warm cream */
  --mp-color-accent: #D67651;      /* lifted terracotta for dark bg */
  --mp-color-accent-dark: #E18C66; /* hover (lifts further) */
  --mp-color-accent-soft: rgba(214, 118, 81, 0.12);
  --mp-color-divider: #4A3A2E;     /* warm-walnut border, visible at low contrast */
  --mp-color-overlay: rgba(0, 0, 0, 0.72);

  --color-primary: #D67651;        /* lifted terracotta for dark bg */
  --color-primary-hover: #E18C66;
  --color-warning: #E5A840;
  --color-danger: #D65033;          /* lifted danger red */
  --color-danger-hover: #E47254;
  --color-success: #87A874;         /* lifted sage olive */
  --color-success-hover: #9DBE8B;

  --text-inverse: #2A1F1A;            /* walnut on light surfaces */
  --color-surface-hover: rgba(255, 255, 255, 0.04);

  --color-primary-bg: rgba(214, 118, 81, 0.06);
  --color-primary-subtle: rgba(214, 118, 81, 0.12);
  --color-primary-muted: rgba(214, 118, 81, 0.18);
  --color-primary-ring: rgba(214, 118, 81, 0.28);
  --color-primary-glow: rgba(214, 118, 81, 0.35);
  --color-primary-medium: rgba(214, 118, 81, 0.6);
  --color-primary-bright: rgba(214, 118, 81, 0.78);
  --color-primary-active: #B5573A;

  --gradient-primary: linear-gradient(135deg, #D67651, #B5573A);
  --gradient-primary-hover: linear-gradient(135deg, #B5573A, #94431F);

  --color-danger-subtle: rgba(214, 80, 51, 0.14);
  --color-danger-border: rgba(214, 80, 51, 0.28);
  --color-danger-border-strong: rgba(214, 80, 51, 0.40);
  --color-danger-solid: rgba(214, 80, 51, 0.85);
  --color-danger-bg-hover: rgba(214, 80, 51, 0.25);

  --color-success-subtle: rgba(135, 168, 116, 0.14);

  /* Status text colors — lifted for dark surfaces */
  --color-danger-text: #E29A82;
  --color-success-text: #B5CFA0;
  --border-strong: #5C4A3C;
  --input-placeholder: #A89889;

  --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(176, 152, 130, 0.7);

  --bg-primary: #1F1815;
  --bg-secondary: #2E2520;
  --bg-tertiary: #382B23;
  --bg-elevated: #2E2520;
  --bg-inset: #1A1411;

  --text-primary: #F2EAD9;
  --text-secondary: #C8B7A1;
  --text-muted: #B0A091;

  --border-default: #4A3A2E;
  --border-color: #4A3A2E;
  --border-hover: #D67651;
  --border-focus: #D67651;

  --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(214, 118, 81, 0.25);
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Marketing palette dark-mode counterparts — see [data-theme="dark"] block. */
    --mp-color-bg: #1F1815;
    --mp-color-surface: #2E2520;
    --mp-color-surface-warm: #382B23;
    --mp-color-text: #F2EAD9;
    --mp-color-text-muted: #C8B7A1;
    --mp-color-accent: #D67651;
    --mp-color-accent-dark: #E18C66;
    --mp-color-accent-soft: rgba(214, 118, 81, 0.12);
    --mp-color-divider: #4A3A2E;
    --mp-color-overlay: rgba(0, 0, 0, 0.72);

    --color-primary: #D67651;
    --color-primary-hover: #E18C66;
    --color-warning: #E5A840;
    --color-danger: #D65033;
    --color-danger-hover: #E47254;
    --color-success: #87A874;
    --color-success-hover: #9DBE8B;

    --text-inverse: #2A1F1A;
    --color-surface-hover: rgba(255, 255, 255, 0.04);

    --color-primary-bg: rgba(214, 118, 81, 0.06);
    --color-primary-subtle: rgba(214, 118, 81, 0.12);
    --color-primary-muted: rgba(214, 118, 81, 0.18);
    --color-primary-ring: rgba(214, 118, 81, 0.28);
    --color-primary-glow: rgba(214, 118, 81, 0.35);
    --color-primary-medium: rgba(214, 118, 81, 0.6);
    --color-primary-bright: rgba(214, 118, 81, 0.78);
    --color-primary-active: #B5573A;

    --gradient-primary: linear-gradient(135deg, #D67651, #B5573A);
    --gradient-primary-hover: linear-gradient(135deg, #B5573A, #94431F);

    --color-danger-subtle: rgba(214, 80, 51, 0.14);
    --color-danger-border: rgba(214, 80, 51, 0.28);
    --color-danger-border-strong: rgba(214, 80, 51, 0.40);
    --color-danger-solid: rgba(214, 80, 51, 0.85);
    --color-danger-bg-hover: rgba(214, 80, 51, 0.25);

    --color-success-subtle: rgba(135, 168, 116, 0.14);

    --color-danger-text: #E29A82;
    --color-success-text: #B5CFA0;
    --border-strong: #5C4A3C;
    --input-placeholder: #A89889;

    --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(176, 152, 130, 0.7);

    --bg-primary: #1F1815;
    --bg-secondary: #2E2520;
    --bg-tertiary: #382B23;
    --bg-elevated: #2E2520;
    --bg-inset: #1A1411;

    --text-primary: #F2EAD9;
    --text-secondary: #C8B7A1;
    --text-muted: #B0A091;

    --border-default: #4A3A2E;
    --border-color: #4A3A2E;
    --border-hover: #D67651;
    --border-focus: #D67651;

    --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(214, 118, 81, 0.25);
  }
}