/* SDP primitives and semantic aliases layered over @solana/design-system. */

:root {
  --surface: #e9e7de;
  --surface-sunken: #f0ede6;
  --surface-raised: #fcfcfa;

  --emph-xh: #1c1c1d;
  --emph-m: rgba(28, 28, 29, 0.72);
  --emph-l: rgba(28, 28, 29, 0.56);
  --emph-xl: rgba(28, 28, 29, 0.44);
  --on-primary: #fcfcfa;

  --t4: rgba(28, 28, 29, 0.04);
  --t8: rgba(28, 28, 29, 0.08);
  --t12: rgba(28, 28, 29, 0.12);

  --border-xl: rgba(28, 28, 29, 0.08);
  --border-l: rgba(28, 28, 29, 0.12);
  --border-m: rgba(28, 28, 29, 0.2);

  --green-tx: #007a4e;
  --green-bg: rgba(0, 160, 102, 0.08);
  --green-brd: rgba(0, 160, 102, 0.2);
  --amber-tx: #854d0e;
  --amber-bg: rgba(234, 179, 8, 0.08);
  --amber-brd: rgba(234, 179, 8, 0.2);
  --red-tx: #b91c1c;
  --red-bg: rgba(220, 38, 38, 0.08);
  --red-brd: rgba(220, 38, 38, 0.2);
  --blue-tx: #1d4ed8;
  --blue-bg: rgba(37, 99, 235, 0.08);
  --blue-brd: rgba(37, 99, 235, 0.2);

  --crimson: #c71f37;
  --crimson-strong: #9e2b38;
  --crimson-strongest: #8a1f2a;
  --crimson-bg: rgba(199, 31, 55, 0.08);
  --crimson-brd: rgba(199, 31, 55, 0.2);

  /* Clerk supports these native CSS variables, so its first paint follows the
     pre-hydration .dark class without a theme-dependent React render. */
  --clerk-color-primary: #1c1c1d;
  --clerk-color-primary-foreground: #fcfcfa;
  --clerk-color-foreground: #1c1c1d;
  --clerk-color-muted-foreground: rgba(28, 28, 29, 0.64);
  --clerk-color-neutral: #1c1c1d;
  --clerk-color-background: #fcfcfa;
  --clerk-color-input: #f0ede6;
  --clerk-color-input-foreground: #1c1c1d;
  --clerk-color-muted: rgba(28, 28, 29, 0.06);
  --clerk-color-border: rgba(28, 28, 29, 0.14);
  --clerk-color-ring: rgba(28, 28, 29, 0.4);
  --clerk-color-shimmer: rgba(28, 28, 29, 0.1);
  --clerk-color-danger: #b91c1c;
  --clerk-color-success: #007a4e;
  --clerk-color-warning: #854d0e;
  --sdp-clerk-provider-icon-filter: none;
}

@theme inline {
  --color-primary: var(--emph-xh);
  --color-secondary: var(--emph-m);
  --color-tertiary: var(--emph-l);
  --color-muted: var(--emph-xl);
  --color-on-primary: var(--on-primary);

  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-surface-sunken: var(--surface-sunken);

  --color-fill-subtle: var(--t4);
  --color-fill: var(--t8);
  --color-fill-strong: var(--t12);
  /* --fill, composited by hand so it is opaque. The tinted fills above are ink at 4/8/12%
     alpha, so whatever sits behind an element painted in one of them shows through it.
     Overlays that have to *occlude* what is behind them — a mark covering the edge of a
     band, say — take this instead: sRGB is the space the browser composites in, so over a
     raised card it is pixel-identical to --color-fill, and the only thing it changes is
     what it lets through. Only correct on --surface-raised; it names its ground. */
  --color-fill-opaque: color-mix(in srgb, var(--surface-raised) 92%, var(--emph-xh));

  --color-border-subtle: var(--border-xl);
  --color-border-default: var(--border-l);
  --color-border-strong: var(--border-m);

  --color-success: var(--green-tx);
  --color-success-bg: var(--green-bg);
  --color-success-border: var(--green-brd);
  --color-warning: var(--amber-tx);
  --color-warning-bg: var(--amber-bg);
  --color-warning-border: var(--amber-brd);
  --color-error: var(--red-tx);
  --color-error-bg: var(--red-bg);
  --color-error-border: var(--red-brd);
  --color-info: var(--blue-tx);
  --color-info-bg: var(--blue-bg);
  --color-info-border: var(--blue-brd);

  --color-destructive: var(--crimson);
  --color-destructive-strong: var(--crimson-strong);
  --color-destructive-strongest: var(--crimson-strongest);
  --color-destructive-bg: var(--crimson-bg);
  --color-destructive-border: var(--crimson-brd);

  --shadow-ring:
    0 0 0 1px rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 8%), 0 16px 40px 0 rgb(0 0 0 / 12%);

  /* Project-wide default for transition/transition-colors/transition-all
     utilities that don't set an explicit duration-* (Tailwind's built-in
     default is 150ms). DS components with hardcoded durations are unaffected. */
  --default-transition-duration: 250ms;
}

/* Point design-system runtime tokens at SDP's product palette. */
:root {
  --gray-1400: var(--emph-xh);
  --gray-1300: var(--emph-xh);

  --status-success-text: var(--green-tx);
  --status-success-bg: var(--green-bg);
  --status-success-border: var(--green-brd);
  --status-error-text: var(--red-tx);
  --status-error-bg: var(--red-bg);
  --status-error-border: var(--red-brd);
  --status-warning-text: var(--amber-tx);
  --status-warning-bg: var(--amber-bg);
  --status-warning-border: var(--amber-brd);
  --status-info-text: var(--blue-tx);
  --status-info-bg: var(--blue-bg);
  --status-info-border: var(--blue-brd);

  --badge-success-bg: var(--green-bg);
  --badge-success-text: var(--green-tx);
  --badge-success-dot: var(--green-tx);
  --badge-warning-bg: var(--amber-bg);
  --badge-warning-text: var(--amber-tx);
  --badge-warning-dot: var(--amber-tx);
  --badge-danger-bg: var(--red-bg);
  --badge-danger-text: var(--red-tx);
  --badge-danger-dot: var(--red-tx);
  --badge-info-bg: var(--blue-bg);
  --badge-info-text: var(--blue-tx);
  --badge-info-dot: var(--blue-tx);
}

:root.dark {
  color-scheme: dark;

  --surface: #1c1c1d;
  --surface-sunken: color-mix(in oklab, #1c1c1d 94%, #fcfcfa);
  --surface-raised: color-mix(in oklab, #1c1c1d 87%, #fcfcfa);

  --emph-xh: #fcfcfa;
  --emph-m: rgba(252, 252, 250, 0.84);
  --emph-l: rgba(252, 252, 250, 0.72);
  --emph-xl: rgba(252, 252, 250, 0.6);
  --on-primary: #1c1c1d;

  --t4: rgba(252, 252, 250, 0.04);
  --t8: rgba(252, 252, 250, 0.08);
  --t12: rgba(252, 252, 250, 0.12);

  --border-xl: rgba(252, 252, 250, 0.08);
  --border-l: rgba(252, 252, 250, 0.12);
  --border-m: rgba(252, 252, 250, 0.2);

  /* Dark status palette from @solana/design-system (text/border contrast-verified).
     The *-bg fills are lifted from the DS default (L~0.21) to L~0.27 (amber a touch
     higher at 0.28) so the tinted panels sit just above the page surface and read
     calmer against the bright text. */
  --green-tx: oklch(0.78 0.1 155);
  --green-bg: oklch(0.27 0.04 155);
  --green-brd: oklch(0.42 0.08 155);
  --amber-tx: oklch(0.8 0.11 85);
  --amber-bg: oklch(0.28 0.045 85);
  --amber-brd: oklch(0.46 0.09 85);
  --red-tx: oklch(0.8 0.12 25);
  --red-bg: oklch(0.27 0.05 25);
  --red-brd: oklch(0.45 0.1 25);
  --blue-tx: oklch(0.79 0.1 250);
  --blue-bg: oklch(0.27 0.045 250);
  --blue-brd: oklch(0.43 0.08 250);

  --crimson: oklch(0.72 0.16 25);
  --crimson-strong: oklch(0.68 0.16 25);
  --crimson-strongest: oklch(0.64 0.16 25);
  --crimson-bg: oklch(0.21 0.04 25);
  --crimson-brd: oklch(0.45 0.1 25);

  --clerk-color-primary: #fcfcfa;
  --clerk-color-primary-foreground: #1c1c1d;
  --clerk-color-foreground: #fcfcfa;
  --clerk-color-muted-foreground: rgba(252, 252, 250, 0.72);
  --clerk-color-neutral: #fcfcfa;
  --clerk-color-background: #343435;
  --clerk-color-input: #1c1c1d;
  --clerk-color-input-foreground: #fcfcfa;
  --clerk-color-muted: rgba(252, 252, 250, 0.08);
  --clerk-color-border: rgba(252, 252, 250, 0.16);
  --clerk-color-ring: rgba(252, 252, 250, 0.56);
  --clerk-color-shimmer: rgba(252, 252, 250, 0.1);
  --clerk-color-danger: #fda4af;
  --clerk-color-success: #6ee7b7;
  --clerk-color-warning: #fcd34d;
  --sdp-clerk-provider-icon-filter: grayscale(1) brightness(0) invert(1);
}

/* Keep Chrome autofill aligned with the active native color scheme. */
:root.dark input:-webkit-autofill,
:root.dark input:-webkit-autofill:hover,
:root.dark input:-webkit-autofill:focus,
:root.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-sunken) inset;
  box-shadow: 0 0 0 1000px var(--surface-sunken) inset;
  -webkit-text-fill-color: var(--emph-xh);
  caret-color: var(--emph-xh);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 150ms ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-sdp-toggle-switch],
  [data-sdp-toggle-switch] > span {
    transition: none;
  }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="month"]::-webkit-calendar-picker-indicator,
  input[type="week"]::-webkit-calendar-picker-indicator {
    transition: none;
  }
}
