@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;

  --color-background: #f5f1e6;
  --color-foreground: #3a3a3a;
  --color-surface: #f5f1e6;
  --color-surface-dim: #dddacf;
  --color-surface-bright: #f5f1e6;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f7f3e8;
  --color-surface-container: #f2eee3;
  --color-surface-high: #ece8dd;
  --color-surface-highest: #e6e2d7;
  --color-surface-variant: #e6e2d7;
  --color-on-surface: #3a3a3a;
  --color-on-surface-variant: #404941;
  --color-inverse-surface: #323129;
  --color-inverse-on-surface: #f4f0e6;
  --color-outline: #707971;
  --color-outline-variant: #c0c9bf;

  --color-primary: #2f6b46;
  --color-on-primary: #ffffff;
  --color-primary-container: #1e4a31;
  --color-on-primary-container: #a9e9bb;
  --color-primary-fixed: #b1f1c2;
  --color-inverse-primary: #96d5a7;

  --color-secondary: #b8862e;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d9a441;
  --color-on-secondary-container: #4a3308;
  --color-secondary-fixed: #ffdeaa;

  --color-tertiary: #822912;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #a24027;
  --color-on-tertiary-container: #ffcfc4;
  --color-tertiary-fixed: #ffdbd2;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;
  --spacing-gutter: 24px;
  --spacing-container-max: 1200px;

  --shadow-card: 0 2px 10px rgba(19, 82, 48, 0.06);
  --shadow-raised: 0 4px 14px rgba(19, 82, 48, 0.14);
}

@custom-variant dark (&:where(.dark, .dark *));

/* Dark theme: same brand hues, re-tuned for low light. */
.dark {
  --color-background: #10130f;
  --color-foreground: #e9e6dc;
  --color-surface: #10130f;
  --color-surface-dim: #0c0f0b;
  --color-surface-bright: #262a24;
  --color-surface-lowest: #1a1e18;
  --color-surface-low: #171b15;
  --color-surface-container: #1d211b;
  --color-surface-high: #14180f;
  --color-surface-highest: #2b302a;
  --color-surface-variant: #2b302a;
  --color-on-surface: #e9e6dc;
  --color-on-surface-variant: #c6cec3;
  --color-inverse-surface: #e9e6dc;
  --color-inverse-on-surface: #1a1e18;
  --color-outline: #9aa397;
  --color-outline-variant: #3b423a;

  --color-primary: #7fd39c;
  --color-on-primary: #06210f;
  --color-primary-container: #235c3c;
  --color-on-primary-container: #b9f2c9;
  --color-inverse-primary: #2f6b46;

  --color-secondary: #e8bd63;
  --color-on-secondary: #2c1f03;
  --color-secondary-container: #6b4e14;
  --color-on-secondary-container: #ffdeaa;
  --color-secondary-fixed: #4a3308;

  --color-tertiary: #ffb4a1;
  --color-on-tertiary: #3d1004;
  --color-tertiary-container: #7a2a12;
  --color-on-tertiary-container: #ffdbd2;

  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 4px 14px rgba(0, 0, 0, 0.5);
}

@layer base {
  * {
    border-color: var(--color-outline-variant);
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  /* Accessibility: always-visible keyboard focus. */
  :focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Comfortable tap targets on touch devices. */
  @media (pointer: coarse) {
    button,
    a[href],
    input,
    select,
    [role="button"] {
      min-height: 44px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    background-color: var(--color-background);
    color: var(--color-on-background, var(--color-on-surface));
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
  }

  button {
    font-family: var(--font-display);
  }
}

@utility font-display {
  font-family: var(--font-display);
}

@utility price-display {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}

@utility label-bold {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@utility card {
  background-color: var(--color-surface-lowest);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 45%, transparent);
  box-shadow: var(--shadow-card);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}