@import './coz-fonts.css';

/* Generated by npm run design:tokens. Keep project shadcn imports and Tailwind mappings. */
:root {
  --background: #FFFFFF;
  --foreground: #18181B;
  --card: #F6F6F8;
  --card-foreground: #18181B;
  --popover: #FFFFFF;
  --popover-foreground: #18181B;
  --primary: #18181B;
  --primary-foreground: #FFFFFF;
  --secondary: #EEEEF2;
  --secondary-foreground: #18181B;
  --muted: #F6F6F8;
  --muted-foreground: #686872;
  --accent: #E8F3FF;
  --accent-foreground: #0066D6;
  --border: #E6E6EB;
  --input: #858590;
  --ring: #0066D6;
  --brand: #0066D6;
  --brand-foreground: #FFFFFF;
  --success: #187744;
  --success-surface: #E7F6ED;
  --warning: #875400;
  --warning-surface: #FFF3D6;
  --destructive: #BC2442;
  --destructive-foreground: #FFFFFF;
  --destructive-surface: #FDECEF;
  --navigation-surface: #E5E1F3;
  --navigation-accent: #2600CC;
  --navigation-active: #2600CC;
  --navigation-active-foreground: #FFFFFF;
  --navigation-border: #FFFFFF;
  --navigation-panel: #E9EBFC;
  --navigation-selected: #D3DCF3;
  --navigation-selected-icon: #1665D8;
  --navigation-button: #F6F9FC;
  --job-one-time-surface: #E8F3FF;
  --job-one-time-foreground: #0066D6;
  --job-scheduled-surface: #F0E9FF;
  --job-scheduled-foreground: #6B3DB8;
  --operanda: #146C43;
  --operanda-foreground: #FFFFFF;
  --operanda-surface: #EAF6EF;
  --radius: 1rem;
  --coz-radius-input: 1rem;
  --coz-radius-message: 1.25rem;
  --coz-radius-card: 1.5rem;
  --coz-radius-sheet: 2rem;
  --coz-radius-pill: 999px;
}

.dark {
  --background: #09090B;
  --foreground: #FAFAFC;
  --card: #18181C;
  --card-foreground: #FAFAFC;
  --popover: #18181C;
  --popover-foreground: #FAFAFC;
  --primary: #FAFAFC;
  --primary-foreground: #18181B;
  --secondary: #25252B;
  --secondary-foreground: #FAFAFC;
  --muted: #18181C;
  --muted-foreground: #B5B5BE;
  --accent: #102B43;
  --accent-foreground: #62BCFF;
  --border: #3B3B43;
  --input: #777784;
  --ring: #62BCFF;
  --brand: #62BCFF;
  --brand-foreground: #091622;
  --success: #73D99D;
  --success-surface: #123321;
  --warning: #F4C36C;
  --warning-surface: #382B13;
  --destructive: #FF91A4;
  --destructive-foreground: #3B1722;
  --destructive-surface: #3B1722;
  --navigation-surface: #28213D;
  --navigation-accent: #B8A6FF;
  --navigation-active: #2600CC;
  --navigation-active-foreground: #FFFFFF;
  --navigation-border: #675A82;
  --navigation-panel: #282B3D;
  --navigation-selected: #37486B;
  --navigation-selected-icon: #94BFFF;
  --navigation-button: #242730;
  --job-one-time-surface: #102B43;
  --job-one-time-foreground: #62BCFF;
  --job-scheduled-surface: #302143;
  --job-scheduled-foreground: #C5A3FF;
  --operanda: #75DBA5;
  --operanda-foreground: #092116;
  --operanda-surface: #102F23;
  --radius: 1rem;
  --coz-radius-input: 1rem;
  --coz-radius-message: 1.25rem;
  --coz-radius-card: 1.5rem;
  --coz-radius-sheet: 2rem;
  --coz-radius-pill: 999px;
}

/* Non-interactive metadata/status pills. Import coz-layout.css for size/type tokens.
   Flex layout preserves padding even inside a border-collapse: collapse table. */
.coz-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--coz-space-4);
  width: fit-content;
  max-width: 100%;
  padding: var(--coz-space-4) var(--coz-space-12);
  border-radius: var(--coz-radius-pill);
  font: var(--coz-type-meta);
  background: var(--secondary);
  color: var(--secondary-foreground);
  text-align: center;
  overflow-wrap: anywhere;
}
.coz-pill--block { display: flex; }
.coz-pill--warning { background: var(--warning-surface); color: var(--warning); }
.coz-pill--success { background: var(--success-surface); color: var(--success); }
.coz-pill--error { background: var(--destructive-surface); color: var(--destructive); }

/* Add these mappings inside the existing @theme inline block if using Tailwind v4:
  --font-sans: var(--coz-font-body);
  --font-heading: var(--coz-font-heading);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-success: var(--success);
  --color-success-surface: var(--success-surface);
  --color-warning: var(--warning);
  --color-warning-surface: var(--warning-surface);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-destructive-surface: var(--destructive-surface);

  Use explicit component shapes: rounded-full for buttons;
  rounded-[var(--coz-radius-card)] for cards;
  rounded-t-[var(--coz-radius-sheet)] for sheets.
*/

/* Generated Operanda identity */
:root {
  --operanda: #146C43;
  --operanda-foreground: #FFFFFF;
  --operanda-surface: #EAF6EF;
}
.dark, [data-theme="dark"] {
  --operanda: #75DBA5;
  --operanda-foreground: #092116;
  --operanda-surface: #102F23;
}

/* Generated accent palettes */
[data-accent="coz"] {

}
.dark[data-accent="coz"], [data-theme="dark"][data-accent="coz"] {

}
[data-accent="lilac"] {
  --brand: #6D3FC0;
  --brand-foreground: #FFFFFF;
  --accent: #F1EAFE;
  --accent-foreground: #6D3FC0;
  --ring: #6D3FC0;
  --navigation-surface: #F0E9FA;
  --navigation-accent: #6D3FC0;
  --navigation-panel: #F0E9FA;
  --navigation-selected: #E1D5F4;
  --navigation-selected-icon: #6D3FC0;
  --navigation-active: #6D3FC0;
  --navigation-active-foreground: #FFFFFF;
  --navigation-border: #FFFFFF;
}
.dark[data-accent="lilac"], [data-theme="dark"][data-accent="lilac"] {
  --brand: #C5A5FF;
  --brand-foreground: #24153C;
  --accent: #2D2042;
  --accent-foreground: #C5A5FF;
  --ring: #C5A5FF;
  --navigation-surface: #282135;
  --navigation-accent: #C5A5FF;
  --navigation-panel: #282135;
  --navigation-selected: #453259;
  --navigation-selected-icon: #C5A5FF;
  --navigation-active: #C5A5FF;
  --navigation-active-foreground: #24153C;
  --navigation-border: #75618F;
}
[data-accent="rose"] {
  --brand: #A83265;
  --brand-foreground: #FFFFFF;
  --accent: #FCEAF1;
  --accent-foreground: #A83265;
  --ring: #A83265;
  --navigation-surface: #F8EAF0;
  --navigation-accent: #A83265;
  --navigation-panel: #F8EAF0;
  --navigation-selected: #F1D4E1;
  --navigation-selected-icon: #A83265;
  --navigation-active: #A83265;
  --navigation-active-foreground: #FFFFFF;
  --navigation-border: #FFFFFF;
}
.dark[data-accent="rose"], [data-theme="dark"][data-accent="rose"] {
  --brand: #FFA3C6;
  --brand-foreground: #391525;
  --accent: #3D202E;
  --accent-foreground: #FFA3C6;
  --ring: #FFA3C6;
  --navigation-surface: #32212A;
  --navigation-accent: #FFA3C6;
  --navigation-panel: #32212A;
  --navigation-selected: #563044;
  --navigation-selected-icon: #FFA3C6;
  --navigation-active: #FFA3C6;
  --navigation-active-foreground: #391525;
  --navigation-border: #926277;
}
[data-accent="sage"] {
  --brand: #326C56;
  --brand-foreground: #FFFFFF;
  --accent: #E6F3EB;
  --accent-foreground: #326C56;
  --ring: #326C56;
  --navigation-surface: #E8F1EC;
  --navigation-accent: #326C56;
  --navigation-panel: #E8F1EC;
  --navigation-selected: #CCDFD4;
  --navigation-selected-icon: #326C56;
  --navigation-active: #326C56;
  --navigation-active-foreground: #FFFFFF;
  --navigation-border: #FFFFFF;
}
.dark[data-accent="sage"], [data-theme="dark"][data-accent="sage"] {
  --brand: #96D6B3;
  --brand-foreground: #122D21;
  --accent: #1B3429;
  --accent-foreground: #96D6B3;
  --ring: #96D6B3;
  --navigation-surface: #1F2C25;
  --navigation-accent: #96D6B3;
  --navigation-panel: #1F2C25;
  --navigation-selected: #304E3D;
  --navigation-selected-icon: #96D6B3;
  --navigation-active: #96D6B3;
  --navigation-active-foreground: #122D21;
  --navigation-border: #638571;
}