/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-aspal-50: #F2F4F2;
  --primitive-color-aspal-100: #E4E8E5;
  --primitive-color-aspal-200: #C9D0CD;
  --primitive-color-aspal-300: #A3ADAB;
  --primitive-color-aspal-400: #6E7A79;
  --primitive-color-aspal-500: #4A5654;
  --primitive-color-aspal-600: #333E3D;
  --primitive-color-aspal-700: #232D2F;
  --primitive-color-aspal-800: #182126;
  --primitive-color-aspal-900: #10181D;
  --primitive-color-aspal-950: #0A1014;
  --primitive-color-email-300: #8FBCEC;
  --primitive-color-email-400: #3D7FC4;
  --primitive-color-email-500: #1F5FA8;
  --primitive-color-email-600: #14477E;
  --primitive-color-email-700: #0E3560;
  --primitive-color-email-800: #0A2645;
  --primitive-color-pirus-300: #6FD4CE;
  --primitive-color-pirus-500: #0E9B93;
  --primitive-color-pirus-600: #0B7B76;
  --primitive-color-karat-400: #D08A5F;
  --primitive-color-karat-500: #B4562A;
  --primitive-color-karat-600: #8F4220;
  --primitive-color-porselen: #EFF1EC;
  --primitive-color-kapur: #FAFBF8;
  --primitive-color-putih: #FFFFFF;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.5rem;
  --primitive-spacing-6: 2rem;
  --primitive-spacing-7: 3rem;
  --primitive-spacing-8: 4rem;
  --primitive-spacing-9: 6rem;
  --primitive-spacing-10: 8rem;
  --primitive-fontFamily-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --primitive-fontFamily-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --primitive-fontFamily-mono: 'Martian Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --primitive-fontSize-xs: 0.75rem;
  --primitive-fontSize-sm: 0.875rem;
  --primitive-fontSize-base: 1rem;
  --primitive-fontSize-lg: 1.125rem;
  --primitive-fontSize-xl: 1.375rem;
  --primitive-fontSize-2xl: 1.75rem;
  --primitive-fontSize-3xl: 2.25rem;
  --primitive-fontSize-4xl: 3rem;
  --primitive-fontSize-5xl: 4.25rem;
  --primitive-fontWeight-normal: 400;
  --primitive-fontWeight-medium: 500;
  --primitive-fontWeight-semibold: 600;
  --primitive-fontWeight-bold: 700;
  --primitive-fontWeight-black: 800;
  --primitive-lineHeight-tight: 1.05;
  --primitive-lineHeight-snug: 1.25;
  --primitive-lineHeight-normal: 1.6;
  --primitive-lineHeight-relaxed: 1.75;
  --primitive-tracking-tight: -0.03em;
  --primitive-tracking-normal: 0;
  --primitive-tracking-wide: 0.08em;
  --primitive-tracking-wider: 0.16em;
  --primitive-radius-none: 0;
  --primitive-radius-sm: 3px;
  --primitive-radius-md: 6px;
  --primitive-radius-lg: 10px;
  --primitive-radius-full: 9999px;
  --primitive-border-hair: 1px;
  --primitive-border-rule: 2px;
  --primitive-border-plate: 3px;
  --primitive-shadow-none: none;
  --primitive-shadow-plate: 0 1px 0 0 rgb(16 24 29 / 0.06);
  --primitive-shadow-lift: 0 8px 24px -12px rgb(16 24 29 / 0.28);
  --primitive-duration-fast: 140ms;
  --primitive-duration-normal: 220ms;
  --primitive-duration-slow: 420ms;
  --primitive-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* === SEMANTIC === */
:root {
  --color-background: #EFF1EC;
  --color-surface: #FAFBF8;
  --color-foreground: #10181D;
  --color-primary: #14477E;
  --color-primary-hover: #0E3560;
  --color-primary-foreground: #FFFFFF;
  --color-signal: #0B7B76;
  --color-pending: #B4562A;
  --color-muted: #E4E8E5;
  --color-muted-foreground: #4A5654;
  --color-border: #C9D0CD;
  --color-rule: #10181D;
  --color-ring: #1F5FA8;
  --spacing-gutter: 1.5rem;
  --spacing-block: 3rem;
  --spacing-section: 6rem;
  --layout-max: 72rem;
  --layout-narrow: 48rem;
}

/* === COMPONENTS === */
:root {
  --plate-bg: #FAFBF8;
  --plate-border: #C9D0CD;
  --plate-rule: #10181D;
  --plate-radius: 6px;
  --plate-padding: 1.5rem;
  --plate-shadow: 0 1px 0 0 rgb(16 24 29 / 0.06);
  --plate-hover-shadow: 0 8px 24px -12px rgb(16 24 29 / 0.28);
  --unit-font: 'Martian Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --unit-size: 0.75rem;
  --unit-tracking: 0.16em;
  --unit-color: #4A5654;
  --arrow-color: #14477E;
  --arrow-size: 1.5rem;
  --arrow-travel: 0.5rem;
  --arrow-duration: 220ms;
  --arrow-easing: cubic-bezier(0.2, 0, 0, 1);
  --button-bg: #14477E;
  --button-fg: #FFFFFF;
  --button-hover-bg: #0E3560;
  --button-padding-x: 1.5rem;
  --button-padding-y: 0.75rem;
  --button-radius: 3px;
  --button-font-size: 0.875rem;
  --button-tracking: 0.08em;
  --status-live-dot: #0B7B76;
  --status-pending-dot: #B4562A;
  --status-font: 'Martian Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --status-size: 0.75rem;
  --receipt-bg: #FAFBF8;
  --receipt-fg: #10181D;
  --receipt-font: 'Martian Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --receipt-size: 0.75rem;
  --receipt-line: 1.75;
  --receipt-width: 25.5rem;
  --receipt-padding-x: 1.5rem;
  --receipt-padding-y: 2rem;
  --receipt-tear: 0.75rem;
  --receipt-rule-color: #A3ADAB;
  --receipt-shadow: 0 8px 24px -12px rgb(16 24 29 / 0.28);
}

/* === DARK MODE === */
.dark {
  --color-background: #0A1014;
  --color-surface: #182126;
  --color-foreground: #F2F4F2;
  --color-primary: #8FBCEC;
  --color-primary-hover: #3D7FC4;
  --color-signal: #6FD4CE;
  --color-pending: #D08A5F;
  --color-muted: #232D2F;
  --color-muted-foreground: #A3ADAB;
  --color-border: #232D2F;
  --color-rule: #E4E8E5;
  --color-ring: #8FBCEC;
}