/*
  En Masse PWA theme configuration.

  This file owns the active visual theme: palette tokens, semantic colors,
  shadows, gradients, focus treatment, and the global page canvas. Change
  these values when experimenting with the look of the app.
*/

:root {
  --fox-deep: #a63a12;
  --fox-red: #cc5418;
  --fox-orange: #e9771f;
  --fox-amber: #eda95b;
  --fox-snow: #fff3df;

  --teal-950: #103230;
  --teal-900: #163f3c;
  --teal-800: #1f5f59;
  --teal-700: #23645e;
  --teal-600: #3f8278;
  --teal-100: #edf7f4;
  /* --teal-950: rgb(30, 68, 89);
  --teal-900: rgb(22, 63, 80);
  --teal-800: rgb(27, 84, 97);
  --teal-700: rgb(35, 100, 114);
  --teal-600: rgb(63, 130, 140);
  --teal-300: rgb(119, 168, 175);
  /* --teal-200: rgb(148, 187, 193);
  --teal-200: rgb(225 241 244);
  --teal-100: rgb(237, 247, 244); */


  --color-shell: var(--fox-red);
  --color-shell-strong: var(--fox-deep);
  --color-primary: var(--teal-700);
  --color-primary-strong: var(--teal-900);
  --color-primary-soft: var(--teal-100);
  --color-accent: var(--fox-red);
  --color-accent-strong: var(--fox-deep);
  --color-highlight: var(--fox-amber);
  --color-danger: #9b2f24;
  --color-danger-soft: #fae4df;
  --color-success: var(--teal-600);
  --color-success-soft: var(--teal-100);
  --color-warning: #a35415;
  --color-warning-soft: #ffe8c8;
  --color-page: var(--fox-snow);
  --color-background: var(--fox-snow);
  --color-surface: #fff8ea;
  --color-surface-elevated: #fffaf0;
  --color-surface-muted: #f8e7ce;
  --color-overlay: rgba(39, 23, 14, 0.62);
  --color-border: #dfc2a2;
  --color-border-strong: #a77248;
  --color-text: #27170e;
  --color-text-muted: #6a4e3c;
  --color-text-inverse: #fff8ea;
  --color-link: var(--teal-800);
  --color-link-hover: var(--teal-950);
  --shadow-subtle: 0 3px 10px rgba(103, 48, 14, 0.08);
  --shadow-surface: 0 14px 34px rgba(103, 48, 14, 0.13);
  --shadow-elevated: 0 18px 42px rgba(103, 48, 14, 0.18);
  --shadow-bottom-bar: 0 -12px 30px rgba(76, 39, 13, 0.18);
  --shadow-modal: 0 24px 60px rgba(39, 23, 14, 0.28);
  --shadow-focus: 0 0 0 3px rgba(35, 100, 94, 0.24);

  --gradient-balanced-fox-page:
    radial-gradient(circle at 20% -7%, rgba(255, 215, 153, 0.42), transparent 220px),
    radial-gradient(circle at 88% 20%, rgba(255, 186, 93, 0.34), transparent 225px),
    radial-gradient(circle at 50% 92%, rgba(255, 238, 211, 0.46), transparent 275px),
    linear-gradient(160deg, #a63a12 0%, #cc5418 32%, #e9771f 60%, #eda95b 84%, #fff3df 100%);
  --gradient-balanced-fox-mark:
    radial-gradient(circle at 30% 22%, rgba(255, 226, 170, 0.48), transparent 33%),
    linear-gradient(145deg, #c64a10 0%, #e9771f 52%, #eda95b 100%);
  --gradient-balanced-fox-hero:
    radial-gradient(circle at 86% 12%, rgba(255, 218, 153, 0.26), transparent 140px),
    linear-gradient(145deg, #a63a12 0%, #cc5418 48%, #e9771f 100%);

  --button-primary-bg: #23645e;
  --button-primary-gradient:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, #163f3c 0%, #23645e 52%, #4f9a8e 100%);
  --button-primary-border: rgba(16, 50, 48, 0.18);
  --button-primary-shadow: 0 12px 28px rgba(31, 95, 89, 0.25);
  --button-primary-text: #fffaf0;
  --button-primary-hover-bg: #1f5f59;
  --button-primary-hover-gradient:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #103230 0%, #1f5f59 54%, #3f8278 100%);
  --button-primary-hover-border: rgba(16, 50, 48, 0.22);
}

.pwa-test-theme {
  --color-shell: #315f9b;
  --color-shell-strong: #24466f;
  --color-accent: #315f9b;
  --color-accent-strong: #24466f;
}

html {
  background: var(--fox-snow);
}

body {
  background: var(--gradient-balanced-fox-page);
  background-attachment: fixed;
  min-height: 100vh;
}