/* Kylon App Kit v1 design variables.
   Keep this file in sync with packages/web/src/app.css.
   Do not add component classes, CSS resets, or framework-specific styles here. */

:root {
  --background: #ffffff;
  --card: #fafbf8;
  --popover: #fafbf8;
  --surface: #ffffff;
  --inverse: #045c45;
  --dismiss: #d1d9bc0d;

  --foreground: #090e00;
  --card-foreground: #090e00;
  --popover-foreground: #090e00;
  --inverse-foreground: #ddfdc6;
  --muted-foreground: #4f4f4f;
  --tertiary-foreground: #838383;
  --placeholder-foreground: #bbbbbb;
  --disabled-foreground: #cecece;

  --primary: #045c45;
  --primary-foreground: #ffffff;
  --secondary: #d1d9bc33;
  --secondary-foreground: #090e00;
  --muted: #d1d9bc33;
  --accent: #d1d9bc33;
  --accent-foreground: #090e00;
  --primary-subtle: #045c451f;

  --brand-accent: #003b00;
  --brand-subtle: #ddfdc6;
  --brand-secondary: #f4ff7f;
  --brand-tertiary: #ffcce6;
  --brand-black: #090e00;
  --brand-white: #ffffff;

  --border: #0000001f;
  --input: #00000017;
  --ring: #000000de;
  --ring-subtle: #00000066;
  --border-inverse: #ffffff26;

  --hover-overlay: #181d070d;
  --press-overlay: #181d0712;
  --hover-overlay-inverse: #ffffff0f;
  --press-overlay-inverse: #ffffff1a;
  --overlay-strong: #f3f5efe0;
  --overlay-subtle: #f3f5ef45;

  --destructive: #dc3e42;
  --destructive-foreground: #ffffff;
  --destructive-subtle: #dc3e421f;
  --info: #3e63dd;
  --info-subtle: #3e63dd1f;
  --success: #12a594;
  --success-subtle: #12a5941f;
  --warning: #ef5f00;
  --warning-subtle: #ef5f001f;

  --palette-kylon-bg: #e6fbe5;
  --palette-kylon-fg: #045c45;
  --palette-purple-bg: #f4f0fe;
  --palette-purple-fg: #6550b9;
  --palette-pink-bg: #fee9f5;
  --palette-pink-fg: #c2298a;
  --palette-cyan-bg: #def7f9;
  --palette-cyan-fg: #107d98;
  --palette-blue-bg: var(--palette-cyan-bg);
  --palette-blue-fg: var(--palette-cyan-fg);
  --palette-mint-bg: #ddf9f2;
  --palette-mint-fg: #027864;
  --palette-orange-bg: #ffefd6;
  --palette-orange-fg: #cc4e00;
  --palette-brown-bg: #fffab8;
  --palette-brown-fg: #7d5e54;

  --resource-icon-rose: #a64f5a;
  --resource-icon-orange: #a65e3f;
  --resource-icon-yellow: #8a702a;
  --resource-icon-green: #5a803f;
  --resource-icon-teal: #2f8178;
  --resource-icon-cyan: #2f7882;
  --resource-icon-blue: #4c789f;
  --resource-icon-indigo: #6864aa;
  --resource-icon-purple: #9456a4;
  --resource-icon-pink: #a65386;

  --chart-1: #a4d928;
  --chart-2: #6550b9;
  --chart-3: #12a594;
  --chart-4: #cc4e00;
  --chart-5: #c2298a;
  --chart-6: #2e8bc0;
  --chart-7: #e6a817;
  --chart-8: #7c4dff;
  --chart-9: #00897b;

  --shadow-default: 0 4px 16px 0 #0000000a;
  --shadow-active: 0 4px 20px 0 #0000000f;
  --shadow-floating: 0 4px 24px 0 #00000014;
  --shadow-overlay: 0 4px 48px 0 #0000000f;
  --shadow-xs: var(--shadow-default);

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-6: 0.375rem;
  --radius: 0.5rem;
  --radius-10: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 624.9375rem;

  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --surface-soft: color-mix(in oklab, var(--background) 94%, var(--primary) 6%);
  --line-soft: color-mix(in oklab, var(--foreground) 10%, transparent);
  --status-online: color-mix(in oklab, var(--chart-5) 78%, var(--background) 22%);
  --unread-dot: var(--palette-kylon-fg);
  --agent-surface: color-mix(in oklab, var(--primary) 14%, var(--background) 86%);
  --agent-foreground: var(--primary);

  --motion-duration-fast: 160ms;
  --motion-duration-medium: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --kylon-background: var(--background);
  --kylon-surface: var(--surface);
  --kylon-elevated: var(--card);
  --kylon-muted: var(--muted);
  --kylon-foreground: var(--foreground);
  --kylon-muted-foreground: var(--muted-foreground);
  --kylon-tertiary-foreground: var(--tertiary-foreground);
  --kylon-border: var(--border);
  --kylon-border-subtle: var(--input);
  --kylon-primary: var(--primary);
  --kylon-primary-foreground: var(--primary-foreground);
  --kylon-accent-bg: var(--palette-kylon-bg);
  --kylon-accent-fg: var(--palette-kylon-fg);
  --kylon-hover: var(--hover-overlay);
  --kylon-press: var(--press-overlay);
  --kylon-radius-sm: var(--radius-sm);
  --kylon-radius-md: var(--radius);
  --kylon-shadow-default: var(--shadow-default);
  --kylon-font-sans: var(--font-sans);
  --kylon-font-mono: var(--font-mono);
}

.dark,
[data-theme="dark"] {
  --background: #242424;
  --card: #2c2c2c;
  --popover: #2c2c2c;
  --surface: #3a3a3a;
  --inverse: #ddfdc6;
  --dismiss: #f2f3f114;

  --foreground: #eeeeee;
  --card-foreground: #eeeeee;
  --popover-foreground: #eeeeee;
  --inverse-foreground: #045c45;
  --muted-foreground: #b4b4b4;
  --tertiary-foreground: #999999;
  --placeholder-foreground: #606060;
  --disabled-foreground: #484848;

  --secondary: #f2f3f117;
  --secondary-foreground: #eeeeee;
  --muted: #f2f3f11f;
  --accent: #f2f3f11f;
  --accent-foreground: #eeeeee;

  --border: #ffffff26;
  --input: #ffffff1c;
  --ring: #ffffffed;
  --ring-subtle: #ffffff73;
  --border-inverse: #0000001f;

  --hover-overlay: #ffffff12;
  --press-overlay: #ffffff1a;
  --hover-overlay-inverse: #00000005;
  --press-overlay-inverse: #0000000d;
  --overlay-strong: #090e00ad;
  --overlay-subtle: #090e0054;

  --destructive: #ee736f;
  --destructive-subtle: #ee736f1a;
  --info: #92acec;
  --info-subtle: #92acec1a;
  --success: #19dbc4;
  --success-subtle: #19dbc41a;
  --warning: #ffa37d;
  --warning-subtle: #ffa37d1a;

  --palette-kylon-bg: #045c45;
  --palette-kylon-fg: #e6fbe5;
  --palette-purple-bg: #4d3c90;
  --palette-purple-fg: #f4f0fe;
  --palette-pink-bg: #763152;
  --palette-pink-fg: #fee9f5;
  --palette-cyan-bg: #0b576a;
  --palette-cyan-fg: #def7f9;
  --palette-blue-bg: var(--palette-cyan-bg);
  --palette-blue-fg: var(--palette-cyan-fg);
  --palette-mint-bg: #01463b;
  --palette-mint-fg: #ddf9f2;
  --palette-orange-bg: #7b3610;
  --palette-orange-fg: #feefd8;
  --palette-brown-bg: #61463d;
  --palette-brown-fg: #fff195;

  --chart-1: #b8e636;
  --chart-2: #9b82ff;
  --chart-3: #5dcec4;
  --chart-4: #ff9a5a;
  --chart-5: #e36cab;
  --chart-6: #4db8d9;
  --chart-7: #f0c040;
  --chart-8: #a07cff;
  --chart-9: #26a69a;

  --surface-soft: color-mix(in oklab, var(--background) 84%, var(--primary) 16%);
  --line-soft: color-mix(in oklab, var(--foreground) 16%, transparent);
  --status-online: color-mix(in oklab, var(--chart-5) 82%, var(--background) 18%);
  --agent-surface: color-mix(in oklab, var(--primary) 18%, var(--background) 82%);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --background: #242424;
    --card: #2c2c2c;
    --popover: #2c2c2c;
    --surface: #3a3a3a;
    --inverse: #ddfdc6;
    --dismiss: #f2f3f114;
    --foreground: #eeeeee;
    --card-foreground: #eeeeee;
    --popover-foreground: #eeeeee;
    --inverse-foreground: #045c45;
    --muted-foreground: #b4b4b4;
    --tertiary-foreground: #999999;
    --placeholder-foreground: #606060;
    --disabled-foreground: #484848;
    --secondary: #f2f3f117;
    --secondary-foreground: #eeeeee;
    --muted: #f2f3f11f;
    --accent: #f2f3f11f;
    --accent-foreground: #eeeeee;
    --border: #ffffff26;
    --input: #ffffff1c;
    --ring: #ffffffed;
    --ring-subtle: #ffffff73;
    --border-inverse: #0000001f;
    --hover-overlay: #ffffff12;
    --press-overlay: #ffffff1a;
    --hover-overlay-inverse: #00000005;
    --press-overlay-inverse: #0000000d;
    --overlay-strong: #090e00ad;
    --overlay-subtle: #090e0054;
    --destructive: #ee736f;
    --destructive-subtle: #ee736f1a;
    --info: #92acec;
    --info-subtle: #92acec1a;
    --success: #19dbc4;
    --success-subtle: #19dbc41a;
    --warning: #ffa37d;
    --warning-subtle: #ffa37d1a;
    --palette-kylon-bg: #045c45;
    --palette-kylon-fg: #e6fbe5;
    --palette-purple-bg: #4d3c90;
    --palette-purple-fg: #f4f0fe;
    --palette-pink-bg: #763152;
    --palette-pink-fg: #fee9f5;
    --palette-cyan-bg: #0b576a;
    --palette-cyan-fg: #def7f9;
    --palette-blue-bg: var(--palette-cyan-bg);
    --palette-blue-fg: var(--palette-cyan-fg);
    --palette-mint-bg: #01463b;
    --palette-mint-fg: #ddf9f2;
    --palette-orange-bg: #7b3610;
    --palette-orange-fg: #feefd8;
    --palette-brown-bg: #61463d;
    --palette-brown-fg: #fff195;
    --chart-1: #b8e636;
    --chart-2: #9b82ff;
    --chart-3: #5dcec4;
    --chart-4: #ff9a5a;
    --chart-5: #e36cab;
    --chart-6: #4db8d9;
    --chart-7: #f0c040;
    --chart-8: #a07cff;
    --chart-9: #26a69a;
    --surface-soft: color-mix(in oklab, var(--background) 84%, var(--primary) 16%);
    --line-soft: color-mix(in oklab, var(--foreground) 16%, transparent);
    --status-online: color-mix(in oklab, var(--chart-5) 82%, var(--background) 18%);
    --agent-surface: color-mix(in oklab, var(--primary) 18%, var(--background) 82%);
  }
}