/* Generated from the canonical design-system source. Do not edit. */
/**
 * Comptableo Design System - canonical tokens
 *
 * This file is the single source of truth for every Comptableo interface.
 * Platform copies are generated by design-system/scripts/sync.mjs.
 * Do not add product-, page- or technology-specific variables here.
 */

:root {
  color-scheme: light;

  /* Color roles */
  --ct-color-surface: #ffffff;
  --ct-color-surface-raised: #ffffff;
  --ct-color-surface-subtle: #f7f7f8;
  --ct-color-surface-muted: #f0f1f3;
  --ct-color-surface-inverse: #181a1f;
  --ct-color-surface-overlay: rgb(18 20 24 / 54%);

  --ct-color-text-primary: #181a1f;
  --ct-color-text-secondary: #5d626c;
  --ct-color-text-tertiary: #6e737c;
  --ct-color-text-inverse: #ffffff;
  --ct-color-text-disabled: #969ba4;

  --ct-color-border: #e2e4e8;
  --ct-color-border-strong: #8f949d;
  --ct-color-border-inverse: rgb(255 255 255 / 24%);

  --ct-color-action: #2558d9;
  --ct-color-action-hover: #1e49b8;
  --ct-color-action-active: #193d98;
  --ct-color-action-subtle: #eef3ff;
  --ct-color-action-subtle-hover: #e1e9ff;
  --ct-color-action-contrast: #ffffff;

  --ct-color-accent: #08766d;
  --ct-color-accent-hover: #065f58;
  --ct-color-accent-subtle: #eaf6f4;
  --ct-color-accent-contrast: #ffffff;

  --ct-color-success: #16794f;
  --ct-color-success-strong: #0f5f3d;
  --ct-color-success-surface: #ecf8f2;
  --ct-color-success-border: #9bd7bd;

  --ct-color-warning: #8a5200;
  --ct-color-warning-strong: #6b3f00;
  --ct-color-warning-surface: #fff6e5;
  --ct-color-warning-border: #efc879;

  --ct-color-danger: #b42318;
  --ct-color-danger-strong: #8f1c13;
  --ct-color-danger-surface: #fff0ee;
  --ct-color-danger-border: #efaaa4;

  --ct-color-info: #175cd3;
  --ct-color-info-strong: #174aab;
  --ct-color-info-surface: #edf4ff;
  --ct-color-info-border: #a9c7f7;

  --ct-color-focus: #2558d9;
  --ct-color-focus-offset: #ffffff;
  --ct-color-selection: #dfe8ff;

  --ct-color-data-1: #2558d9;
  --ct-color-data-2: #08766d;
  --ct-color-data-3: #7c3aed;
  --ct-color-data-4: #b45309;
  --ct-color-data-5: #be185d;

  /* Typography */
  --ct-font-family-sans:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ct-font-family-heading: var(--ct-font-family-sans);
  --ct-font-family-mono:
    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --ct-font-size-xs: 0.75rem;
  --ct-font-size-sm: 0.875rem;
  --ct-font-size-md: 1rem;
  --ct-font-size-lg: 1.125rem;
  --ct-font-size-xl: 1.25rem;
  --ct-font-size-2xl: 1.5rem;
  --ct-font-size-3xl: 1.875rem;
  --ct-font-size-4xl: 2.25rem;
  --ct-font-size-5xl: 3rem;

  --ct-line-height-tight: 1.2;
  --ct-line-height-heading: 1.3;
  --ct-line-height-body: 1.55;
  --ct-line-height-relaxed: 1.7;

  --ct-font-weight-regular: 400;
  --ct-font-weight-medium: 500;
  --ct-font-weight-semibold: 600;
  --ct-font-weight-bold: 700;

  --ct-letter-spacing-tight: -0.025em;
  --ct-letter-spacing-normal: 0;
  --ct-letter-spacing-wide: 0.04em;

  /* Spacing */
  --ct-space-0: 0;
  --ct-space-1: 0.25rem;
  --ct-space-2: 0.5rem;
  --ct-space-3: 0.75rem;
  --ct-space-4: 1rem;
  --ct-space-5: 1.25rem;
  --ct-space-6: 1.5rem;
  --ct-space-8: 2rem;
  --ct-space-10: 2.5rem;
  --ct-space-12: 3rem;
  --ct-space-16: 4rem;
  --ct-space-20: 5rem;
  --ct-space-24: 6rem;

  /* Sizing and layout */
  --ct-size-target-min: 2.75rem;
  --ct-size-control-sm: 2.75rem;
  --ct-size-control-md: 3rem;
  --ct-size-control-lg: 3.25rem;
  --ct-size-icon-sm: 1rem;
  --ct-size-icon-md: 1.25rem;
  --ct-size-icon-lg: 1.5rem;

  --ct-layout-content-sm: 40rem;
  --ct-layout-content-md: 56rem;
  --ct-layout-content-lg: 72rem;
  --ct-layout-content-xl: 82rem;
  --ct-layout-readable: 68ch;
  --ct-layout-sidebar: 16rem;
  --ct-layout-header: 4rem;
  --ct-layout-data-grid-min: 48rem;
  --ct-layout-gutter: clamp(var(--ct-space-4), 3vw, var(--ct-space-8));
  --ct-grid-columns: 12;
  --ct-grid-min-card: 16rem;
  --ct-grid-min-panel: 20rem;
  --ct-grid-gap: var(--ct-space-6);

  /* Breakpoint references. CSS custom properties cannot be used in media
     conditions; keep actual media queries aligned with these values. */
  --ct-breakpoint-mobile: 30rem;
  --ct-breakpoint-mobile-wide: 40rem;
  --ct-breakpoint-tablet: 48rem;
  --ct-breakpoint-laptop: 64rem;
  --ct-breakpoint-desktop: 80rem;
  --ct-breakpoint-ultrawide: 100rem;

  /* Borders and radii */
  --ct-border-width: 1px;
  --ct-border-width-strong: 2px;
  --ct-radius-xs: 0.1875rem;
  --ct-radius-sm: 0.375rem;
  --ct-radius-md: 0.5rem;
  --ct-radius-lg: 0.75rem;
  --ct-radius-xl: 1rem;
  --ct-radius-pill: 999px;

  /* Shadows and elevation */
  --ct-shadow-xs: 0 1px 2px rgb(18 20 24 / 4%);
  --ct-shadow-sm: 0 1px 2px rgb(18 20 24 / 4%), 0 4px 12px rgb(18 20 24 / 4%);
  --ct-shadow-md: 0 12px 32px rgb(18 20 24 / 8%), 0 2px 8px rgb(18 20 24 / 4%);
  --ct-shadow-lg:
    0 24px 64px rgb(18 20 24 / 12%), 0 4px 16px rgb(18 20 24 / 5%);

  --ct-elevation-base: var(--ct-shadow-xs);
  --ct-elevation-raised: var(--ct-shadow-sm);
  --ct-elevation-overlay: var(--ct-shadow-md);
  --ct-elevation-modal: var(--ct-shadow-lg);

  /* Motion */
  --ct-motion-duration-instant: 80ms;
  --ct-motion-duration-fast: 120ms;
  --ct-motion-duration-normal: 180ms;
  --ct-motion-duration-slow: 240ms;
  --ct-motion-duration-loop: 700ms;
  --ct-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ct-motion-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Stacking */
  --ct-z-index-base: 0;
  --ct-z-index-raised: 10;
  --ct-z-index-sticky: 30;
  --ct-z-index-dropdown: 50;
  --ct-z-index-overlay: 70;
  --ct-z-index-modal: 80;
  --ct-z-index-toast: 90;
  --ct-z-index-tooltip: 100;
}

[data-ct-theme='dark'] {
  color-scheme: dark;

  --ct-color-surface: #111827;
  --ct-color-surface-raised: #172033;
  --ct-color-surface-subtle: #0d1422;
  --ct-color-surface-muted: #202b3d;
  --ct-color-surface-inverse: #f8fafc;
  --ct-color-surface-overlay: rgb(2 6 23 / 72%);

  --ct-color-text-primary: #f8fafc;
  --ct-color-text-secondary: #c4cbd5;
  --ct-color-text-tertiary: #a7b0bf;
  --ct-color-text-inverse: #172033;
  --ct-color-text-disabled: #778296;

  --ct-color-border: #303b4e;
  --ct-color-border-strong: #59677d;
  --ct-color-border-inverse: rgb(15 23 42 / 24%);

  --ct-color-action: #7aa2ff;
  --ct-color-action-hover: #96b5ff;
  --ct-color-action-active: #b2c8ff;
  --ct-color-action-subtle: #1c3268;
  --ct-color-action-subtle-hover: #244180;
  --ct-color-action-contrast: #0d1422;

  --ct-color-accent: #5fc9bd;
  --ct-color-accent-hover: #78d7cc;
  --ct-color-accent-subtle: #153e3a;
  --ct-color-accent-contrast: #0d1422;

  --ct-color-success: #64c99a;
  --ct-color-success-strong: #8bd9b5;
  --ct-color-success-surface: #153a2c;
  --ct-color-success-border: #277653;

  --ct-color-warning: #efbd69;
  --ct-color-warning-strong: #f7d28f;
  --ct-color-warning-surface: #422f14;
  --ct-color-warning-border: #755522;

  --ct-color-danger: #ff8e85;
  --ct-color-danger-strong: #ffb2ac;
  --ct-color-danger-surface: #4a211f;
  --ct-color-danger-border: #8f3a34;

  --ct-color-info: #8eb7ff;
  --ct-color-info-strong: #b4ceff;
  --ct-color-info-surface: #1b3260;
  --ct-color-info-border: #315d9f;

  --ct-color-focus: #96b5ff;
  --ct-color-focus-offset: #111827;
  --ct-color-selection: #244180;

  --ct-color-data-1: #8eb7ff;
  --ct-color-data-2: #5fc9bd;
  --ct-color-data-3: #c4a7ff;
  --ct-color-data-4: #efbd69;
  --ct-color-data-5: #f5a3c7;

  --ct-shadow-xs: 0 1px 2px rgb(0 0 0 / 18%);
  --ct-shadow-sm: 0 2px 8px rgb(0 0 0 / 24%);
  --ct-shadow-md: 0 10px 30px rgb(0 0 0 / 30%);
  --ct-shadow-lg: 0 20px 56px rgb(0 0 0 / 38%);
}