@import url('crmSale_dra.css');
@import url('view/main-view.css');
@import url('view/main-view-top-menu.css');
@import url('view/login-view.css');
@import url('view/record-log.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html {
    --lumo-font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   TOKENS · BASE (Light theme)
   ========================================================================== */

:root {
    /* Colors · Core */
    --background: oklch(1.0000 0 0);
    --foreground: oklch(0.1465 0.0252 266.0763);

    /* Colors · Surfaces */
    --card: oklch(0.9755 0.0045 258.3245);
    --card-foreground: oklch(0.1465 0.0252 266.0763);
    --popover: oklch(1.0000 0 0);
    --popover-foreground: oklch(0.1465 0.0252 266.0763);

    /* Colors · Brand */
    --primary: oklch(0.4849 0.2911 264.1212);
    --primary-foreground: oklch(1.0000 0 0);

    /* Colors · Neutral */
    --secondary: oklch(0.6553 0.1864 280.9872);
    --secondary-foreground: oklch(1.0000 0 0);
    --muted: oklch(0.9406 0.0096 273.3527);
    --muted-foreground: oklch(0.4272 0.0364 280.6680);

    /* Colors · Feedback */
    --accent: oklch(0.1724 0.1085 265.4284);
    --accent-foreground: oklch(1.0000 0 0);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);

    /* UI · Borders & Focus */
    --border: oklch(0.8781 0.0166 278.4769);
    --input: oklch(0.8781 0.0166 278.4769);
    --ring: oklch(0.4849 0.2911 264.1212);

    /* Charts */
    --chart-1: oklch(0.4849 0.2911 264.1212);
    --chart-2: oklch(0.1724 0.1085 265.4284);
    --chart-3: oklch(0.6553 0.1864 280.9872);
    --chart-4: oklch(0.5106 0.2301 276.9656);
    --chart-5: oklch(0.7357 0.0389 282.0442);

    /* Sidebar */
    --sidebar: oklch(1.0000 0 0);
    --sidebar-foreground: oklch(0.1465 0.0252 266.0763);
    --sidebar-primary: oklch(0.4849 0.2911 264.1212);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.9755 0.0045 258.3245);
    --sidebar-accent-foreground: oklch(0.1724 0.1085 265.4284);
    --sidebar-border: oklch(0.8781 0.0166 278.4769);
    --sidebar-ring: oklch(0.4849 0.2911 264.1212);

    /* Fonts */
    --font-sans: Inter, system-ui, sans-serif;
    --font-serif: Georgia, serif;
    --font-mono: JetBrains Mono, monospace;

    /* Shape */
    --radius: 0.5rem;

    /* Shadow · Raw values */
    --shadow-x: 0px;
    --shadow-y: 4px;
    --shadow-blur: 10px;
    --shadow-spread: 0px;
    --shadow-opacity: 0.05;
    --shadow-color: 220 20% 10%;

    /* Shadow · Presets */
    --shadow-2xs: 0px 4px 10px 0px hsl(220 20% 10% / 0.03);
    --shadow-xs: 0px 4px 10px 0px hsl(220 20% 10% / 0.03);
    --shadow-sm: 0px 4px 10px 0px hsl(220 20% 10% / 0.05), 0px 1px 2px -1px hsl(220 20% 10% / 0.05);
    --shadow: 0px 4px 10px 0px hsl(220 20% 10% / 0.05), 0px 1px 2px -1px hsl(220 20% 10% / 0.05);
    --shadow-md: 0px 4px 10px 0px hsl(220 20% 10% / 0.05), 0px 2px 4px -1px hsl(220 20% 10% / 0.05);
    --shadow-lg: 0px 4px 10px 0px hsl(220 20% 10% / 0.05), 0px 4px 6px -1px hsl(220 20% 10% / 0.05);
    --shadow-xl: 0px 4px 10px 0px hsl(220 20% 10% / 0.05), 0px 8px 10px -1px hsl(220 20% 10% / 0.05);
    --shadow-2xl: 0px 4px 10px 0px hsl(220 20% 10% / 0.13);

    /* Layout */
    --spacing: 0.25rem;

    /* Typography · Tracking */
    --tracking-normal: 0.025em;

    /* Status */
    --state-primary: oklch(60.27% 0.145 250.96);
    --state-pending: oklch(35.59% 0.038 247.49);
    --state-success: oklch(62.10% 0.137 140.33);
    --state-warning: oklch(86.89% 0.171 90.82);
    --state-danger: oklch(46.17% 0.189 29.31);
    --state-info: oklch(60.27% 0.145 250.96);
}

/* ==========================================================================
   TOKENS · BASE (Dark theme)
   ========================================================================== */

[theme~="dark"] {
    /* Colors · Core */
    --background: oklch(0.1071 0.0194 262.0266);
    --foreground: oklch(0.9842 0.0034 247.8575);

    /* Colors · Surfaces */
    --card: oklch(0.1765 0.0346 267.2777);
    --card-foreground: oklch(0.9842 0.0034 247.8575);
    --popover: oklch(0.1765 0.0346 267.2777);
    --popover-foreground: oklch(0.9842 0.0034 247.8575);

    /* Colors · Brand */
    --primary: oklch(0.4849 0.2911 264.1212);
    --primary-foreground: oklch(1.0000 0 0);

    /* Colors · Neutral */
    --secondary: oklch(0.6553 0.1864 280.9872);
    --secondary-foreground: oklch(0.1465 0.0252 266.0763);
    --muted: oklch(0.2373 0.0386 266.1153);
    --muted-foreground: oklch(0.7107 0.0351 256.7878);

    /* Colors · Feedback */
    --accent: oklch(0.7469 0.1342 282.6631);
    --accent-foreground: oklch(0.1724 0.1085 265.4284);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);

    /* UI · Borders & Focus */
    --border: oklch(0.2795 0.0368 260.0310);
    --input: oklch(0.2795 0.0368 260.0310);
    --ring: oklch(0.4849 0.2911 264.1212);

    /* Charts */
    --chart-1: oklch(0.6231 0.1880 259.8145);
    --chart-2: oklch(0.6553 0.1864 280.9872);
    --chart-3: oklch(0.4849 0.2911 264.1212);
    --chart-4: oklch(0.5854 0.2041 277.1173);
    --chart-5: oklch(0.1724 0.1085 265.4284);

    /* Sidebar */
    --sidebar: oklch(0.1288 0.0201 262.8977);
    --sidebar: oklch(1.0000 0 0);
    --sidebar-foreground: oklch(0.1465 0.0252 266.0763);
    --sidebar-primary: oklch(0.4849 0.2911 264.1212);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.9755 0.0045 258.3245);
    --sidebar-accent-foreground: oklch(0.1724 0.1085 265.4284);
    --sidebar-border: oklch(0.8781 0.0166 278.4769);
    --sidebar-ring: oklch(0.4849 0.2911 264.1212);

    /* Shadow · Raw values */
    --shadow-x: 0px;
    --shadow-y: 10px;
    --shadow-blur: 20px;
    --shadow-spread: 0px;
    --shadow-opacity: 0.5;
    --shadow-color: 0 0% 0%;

    /* Shadow · Presets */
    --shadow-2xs: 0px 10px 20px 0px hsl(0 0% 0% / 0.25);
    --shadow-xs: 0px 10px 20px 0px hsl(0 0% 0% / 0.25);
    --shadow-sm: 0px 10px 20px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
    --shadow: 0px 10px 20px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
    --shadow-md: 0px 10px 20px 0px hsl(0 0% 0% / 0.50), 0px 2px 4px -1px hsl(0 0% 0% / 0.50);
    --shadow-lg: 0px 10px 20px 0px hsl(0 0% 0% / 0.50), 0px 4px 6px -1px hsl(0 0% 0% / 0.50);
    --shadow-xl: 0px 10px 20px 0px hsl(0 0% 0% / 0.50), 0px 8px 10px -1px hsl(0 0% 0% / 0.50);
    --shadow-2xl: 0px 10px 20px 0px hsl(0 0% 0% / 1.25);

    /* Status */
}