/*
 * Miss I Tutoring design system
 * Theme: Fresh Growth
 *
 * Change theme values only in this :root block. Every website colour,
 * including translucent states and shadows, is derived from these tokens.
 */
:root {
  --color-primary: #215c52;
  --color-text: #173f3a;
  --color-background: #fff9ee;
  --color-surface: #ffffff;
  --color-soft: #ddefe7;
  --color-accent: #c84f37;
  --color-highlight: #f4d58d;
  --color-muted: #526b66;
  --color-whatsapp: #25d366;

  --color-on-primary: var(--color-background);
  --color-on-accent: var(--color-surface);
  --color-section-warm: color-mix(in srgb, var(--color-highlight) 32%, var(--color-background));
  --color-section-soft: color-mix(in srgb, var(--color-soft) 52%, var(--color-background));
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, var(--color-text));
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 82%, var(--color-text));
  --color-border: color-mix(in srgb, var(--color-primary) 14%, transparent);
  --color-focus: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --shadow-card-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --shadow-float-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

body,
.text-forest { color: var(--color-text) !important; }

.bg-cream { background-color: var(--color-background) !important; }
.bg-cream\/90 { background-color: color-mix(in srgb, var(--color-background) 90%, transparent) !important; }
.bg-forest { background-color: var(--color-primary) !important; }
.bg-forest-dark { background-color: var(--color-text) !important; }
.bg-white { background-color: var(--color-surface) !important; }
.bg-white\/10 { background-color: color-mix(in srgb, var(--color-surface) 10%, transparent) !important; }
.bg-white\/70 { background-color: color-mix(in srgb, var(--color-surface) 70%, transparent) !important; }
.bg-white\/75 { background-color: color-mix(in srgb, var(--color-surface) 75%, transparent) !important; }
.bg-white\/95 { background-color: color-mix(in srgb, var(--color-surface) 95%, transparent) !important; }
.bg-coral { background-color: var(--color-accent) !important; }
.bg-coral\/10 { background-color: color-mix(in srgb, var(--color-accent) 10%, transparent) !important; }
.bg-sage\/15 { background-color: color-mix(in srgb, var(--color-soft) 72%, transparent) !important; }
.bg-parchment { background-color: var(--color-section-warm) !important; }
.bg-parchment\/75 { background-color: color-mix(in srgb, var(--color-section-warm) 75%, transparent) !important; }
.bg-butter { background-color: var(--color-section-soft) !important; }

.text-coral-dark { color: var(--color-accent) !important; }
.text-moss { color: var(--color-primary) !important; }
.text-cream { color: var(--color-on-primary) !important; }
.text-white { color: var(--color-on-accent) !important; }
.text-forest\/50,
.text-forest\/55,
.text-forest\/60 { color: var(--color-muted) !important; }
.text-forest\/70 { color: var(--color-muted) !important; }
.text-forest\/75 { color: color-mix(in srgb, var(--color-muted) 92%, var(--color-text)) !important; }
.text-cream\/60 { color: color-mix(in srgb, var(--color-on-primary) 72%, transparent) !important; }
.text-cream\/70 { color: color-mix(in srgb, var(--color-on-primary) 76%, transparent) !important; }
.text-cream\/75 { color: color-mix(in srgb, var(--color-on-primary) 80%, transparent) !important; }
.text-\[\#F3A181\],
.text-\[\#F5A784\] { color: var(--color-highlight) !important; }

.border-coral { border-color: var(--color-accent) !important; }
.border-forest\/10 { border-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; }
.border-forest\/15 { border-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; }
.border-sage\/25 { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent) !important; }
.border-cream\/30 { border-color: color-mix(in srgb, var(--color-on-primary) 30%, transparent) !important; }
.border-white { border-color: var(--color-surface) !important; }
.border-white\/10 { border-color: color-mix(in srgb, var(--color-surface) 10%, transparent) !important; }
.border-white\/15 { border-color: color-mix(in srgb, var(--color-surface) 15%, transparent) !important; }
.divide-forest\/10 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; }

.hover\:bg-coral-dark:hover { background-color: var(--color-accent-hover) !important; }
.hover\:bg-parchment:hover { background-color: var(--color-section-warm) !important; }
.hover\:text-white:hover { color: var(--color-surface) !important; }
.hover\:text-\[\#F3A181\]:hover { color: var(--color-highlight) !important; }
.focus-visible\:ring-coral\/40:focus-visible { --tw-ring-color: var(--color-focus) !important; }
.selection\:bg-coral::selection,
.selection\:bg-coral ::selection { background-color: var(--color-accent) !important; }
.selection\:text-white::selection,
.selection\:text-white ::selection { color: var(--color-on-accent) !important; }

.shadow-sm {
  --tw-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 10%, transparent) !important;
}
.shadow-card {
  --tw-shadow: 0 20px 45px -28px var(--shadow-card-color) !important;
}
.shadow-float {
  --tw-shadow: 0 20px 40px -20px var(--shadow-float-color) !important;
}
.shadow-soft {
  --tw-shadow: 0 24px 65px -34px var(--shadow-card-color) !important;
}
.shadow-sm,
.shadow-card,
.shadow-float,
.shadow-soft {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow) !important;
}

/* Replaces the legacy one-off hero gradient and image shadow colours. */
[class*="bg-[radial-gradient"] {
  background-image:
    radial-gradient(circle at 80% 25%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 30%),
    radial-gradient(circle at 8% 85%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 28%) !important;
}
[class*="drop-shadow-"] {
  --tw-drop-shadow: drop-shadow(0 24px 28px color-mix(in srgb, var(--color-primary) 16%, transparent)) !important;
}