/*
  VDK Business Services — Design Tokens
  Base palette: "Camel Linen" (21st.dev/@serafimcloud) — warm linen neutrals + camel accent.
  Added: sage/olive green as a second accent, for the account-management / trust positioning.
  Values captured live from the theme (OKLCH), same L/C/H convention used throughout.
*/

:root {
  /* ---------- Camel Linen base (light) ---------- */
  --background: oklch(0.976 0.007 97.351);
  --foreground: oklch(0.218 0 0);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.218 0 0);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.218 0 0);

  --primary: oklch(0.741 0.074 84.595);       /* camel/tan */
  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.91 0.017 91.561);      /* light beige */
  --secondary-foreground: oklch(0.218 0 0);

  --muted: oklch(0.946 0.017 91.554);         /* linen */
  --muted-foreground: oklch(0.502 0.028 85.774);

  --accent: oklch(0.741 0.074 84.595);
  --accent-foreground: oklch(1 0 0);

  --border: oklch(0.899 0.026 97.142);
  --input: oklch(0.899 0.026 97.142);
  --ring: oklch(0.741 0.074 84.595);

  --destructive: oklch(0.568 0.2 26.406);
  --destructive-foreground: oklch(1 0 0);

  /* ---------- Sage / olive accent (added) ---------- */
  --sage-50:  oklch(0.965 0.012 135);
  --sage-100: oklch(0.93  0.022 132);
  --sage-200: oklch(0.87  0.035 130);
  --sage-300: oklch(0.79  0.05  128);
  --sage-400: oklch(0.70  0.06  126);
  --sage-500: oklch(0.60  0.065 124);         /* core sage */
  --sage-600: oklch(0.51  0.065 122);
  --sage-700: oklch(0.42  0.06  120);
  --sage-800: oklch(0.34  0.05  118);         /* deep olive */
  --sage-900: oklch(0.27  0.04  116);

  --sage: var(--sage-500);
  --sage-foreground: oklch(1 0 0);
  --olive: var(--sage-800);
  --olive-foreground: oklch(0.976 0.007 97.351);

  /* ---------- Typography ---------- */
  --font-sans: "General Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif; /* display/headline face — luxury feel */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --letter-spacing: -0.02em;

  /* ---------- Shape / elevation ---------- */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 0.375rem);
  --radius-lg: calc(var(--radius) + 0.25rem);
  --radius-xl: calc(var(--radius) + 0.75rem);

  --shadow-color: 30 15% 15%;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 8px;
  --shadow-blur: 15px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.06;

  --shadow-sm: var(--shadow-offset-x) calc(var(--shadow-offset-y) * 0.4) calc(var(--shadow-blur) * 0.5) var(--shadow-spread) hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.7));
  --shadow-md: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) hsl(var(--shadow-color) / var(--shadow-opacity));
  --shadow-lg: var(--shadow-offset-x) calc(var(--shadow-offset-y) * 1.8) calc(var(--shadow-blur) * 2) var(--shadow-spread) hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.3));
  --shadow-xl: var(--shadow-offset-x) calc(var(--shadow-offset-y) * 3) calc(var(--shadow-blur) * 3.5) var(--shadow-spread) hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 1.6));

  /* ---------- Motion — restrained, "luxurious" easing ---------- */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);      /* soft deceleration, no overshoot */
  --ease-luxe-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
  --duration-reveal: 1100ms;
}

/*
  ---------- Camel Linen base (dark) ----------
  Applies when the OS prefers dark AND the visitor hasn't explicitly chosen
  light via the theme toggle, OR when the toggle explicitly sets dark —
  so the manual switch always wins over the system preference.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: oklch(0.19 0.004 106.769);
    --foreground: oklch(0.976 0.007 97.351);

    --card: oklch(0.234 0.004 106.686);
    --card-foreground: oklch(0.976 0.007 97.351);

    --popover: oklch(0.234 0.004 106.686);
    --popover-foreground: oklch(0.976 0.007 97.351);

    --primary: oklch(0.804 0.07 84.758);
    --primary-foreground: oklch(0.19 0.004 106.769);

    --secondary: oklch(0.29 0.006 78.232);
    --secondary-foreground: oklch(0.976 0.007 97.351);

    --muted: oklch(0.26 0.004 106.652);
    --muted-foreground: oklch(0.701 0.015 84.591);

    --accent: oklch(0.804 0.07 84.758);
    --accent-foreground: oklch(0.19 0.004 106.769);

    --border: oklch(0.29 0.006 78.232);
    --input: oklch(0.29 0.006 78.232);
    --ring: oklch(0.804 0.07 84.758);

    --shadow-color: 0 0% 0%;
    --shadow-opacity: 0.4;
    --shadow-blur: 25px;
    --shadow-offset-y: 10px;
  }
}

:root[data-theme="dark"] {
  --background: oklch(0.19 0.004 106.769);
  --foreground: oklch(0.976 0.007 97.351);

  --card: oklch(0.234 0.004 106.686);
  --card-foreground: oklch(0.976 0.007 97.351);

  --popover: oklch(0.234 0.004 106.686);
  --popover-foreground: oklch(0.976 0.007 97.351);

  --primary: oklch(0.804 0.07 84.758);
  --primary-foreground: oklch(0.19 0.004 106.769);

  --secondary: oklch(0.29 0.006 78.232);
  --secondary-foreground: oklch(0.976 0.007 97.351);

  --muted: oklch(0.26 0.004 106.652);
  --muted-foreground: oklch(0.701 0.015 84.591);

  --accent: oklch(0.804 0.07 84.758);
  --accent-foreground: oklch(0.19 0.004 106.769);

  --border: oklch(0.29 0.006 78.232);
  --input: oklch(0.29 0.006 78.232);
  --ring: oklch(0.804 0.07 84.758);

  --shadow-color: 0 0% 0%;
  --shadow-opacity: 0.4;
  --shadow-blur: 25px;
  --shadow-offset-y: 10px;
}

:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}