/* ==========================================================================
   Canonical design tokens — single source of truth. Import first, never redefine ad-hoc.
   Node Command (NC) Design System
   Shared canonical stylesheet across apps/control-plane and apps/web.
   ========================================================================== */

/* ==========================================================================
   BREAKPOINTS (Reference Documentation)
   Note: CSS custom properties cannot be used directly in @media queries.
   Use these canonical values across media queries in both applications:

   - 360px  : Mobile / compact viewport    (@media (min-width: 360px))
   - 768px  : Tablet / portrait layout      (@media (min-width: 768px))
   - 1024px : Desktop / laptop landscape   (@media (min-width: 1024px))
   - 1440px : Wide desktop / large display (@media (min-width: 1440px))
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. SPACING SCALE (4px Base Grid)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */

  /* ------------------------------------------------------------------------
     2. RADIUS (Border Radius)
     ------------------------------------------------------------------------ */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     3. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  /* Font Family Stacks (System Fonts) */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

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

  /* ------------------------------------------------------------------------
     4. Z-INDEX SCALE
     ------------------------------------------------------------------------ */
  --z-deep: -1;
  --z-base: 0;
  --z-elevated: 10;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-header: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-tooltip: 80;
  --z-toast: 90;

  /* ------------------------------------------------------------------------
     5. SHADOWS & ELEVATION (Default / Light Mode)
     ------------------------------------------------------------------------ */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 3px oklch(0 0 0 / 0.10);
  --shadow-md: 0 3px 4px -1px oklch(0 0 0 / 0.06), 0 2px 6px -1px oklch(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.08), 0 4px 6px -4px oklch(0 0 0 / 0.06);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.12), 0 8px 10px -6px oklch(0 0 0 / 0.08);
  --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.20);
  --shadow-glow-brand: 0 0 20px -3px oklch(60.02% 0.1038 184.70 / 0.25);
  --shadow-glow-purple: 0 0 24px -2px oklch(55.75% 0.2525 302.32 / 0.20);
  --shadow-glow-blue: 0 0 20px -3px oklch(58.76% 0.1389 241.97 / 0.25);

  /* ------------------------------------------------------------------------
     6. COLORS (Default / Light Theme)
     ------------------------------------------------------------------------ */
  /* Brand / Primary */
  --color-brand: oklch(60.02% 0.1038 184.70);
  --color-brand-hover: oklch(51.09% 0.0861 186.39);
  --color-brand-active: oklch(43.70% 0.0705 188.22);
  --color-brand-subtle: oklch(60.02% 0.1038 184.70 / 0.08);
  --color-brand-contrast: oklch(100% 0 0);

  --color-primary: oklch(60.02% 0.1038 184.70);
  --brand-primary: oklch(60.02% 0.1038 184.70);

  /* Accent */
  --color-accent: oklch(60.02% 0.1038 184.70);
  --color-accent-hover: oklch(51.09% 0.0861 186.39);
  --color-accent-blue: oklch(58.76% 0.1389 241.97);
  --color-accent-purple: oklch(55.75% 0.2525 302.32);
  --color-accent-purple-glow: oklch(55.75% 0.2525 302.32 / 0.15);
  --accent: oklch(60.02% 0.1038 184.70);

  /* Backgrounds */
  --color-bg-page: oklch(98.51% 0 0);
  --color-bg-surface: oklch(100% 0 0);
  --color-bg-elevated: oklch(96.74% 0.0013 286.38);
  --color-bg-overlay: oklch(0 0 0 / 0.5);
  --color-bg-input: oklch(100% 0 0);

  --bg-page: oklch(98.51% 0 0);
  --bg-surface: oklch(100% 0 0);
  --bg-elevated: oklch(96.74% 0.0013 286.38);

  /* Text */
  --color-text-primary: oklch(14.08% 0.0044 285.82);
  --color-text-secondary: oklch(44.19% 0.0146 285.79);
  --color-text-muted: oklch(55.17% 0.0138 285.94);
  --color-text-inverse: oklch(96.74% 0.0013 286.38);
  --color-text-heading: oklch(14.08% 0.0044 285.82);
  --color-text-on-brand: oklch(100% 0 0);

  --text-primary: oklch(14.08% 0.0044 285.82);
  --text-secondary: oklch(44.19% 0.0146 285.79);
  --text-muted: oklch(55.17% 0.0138 285.94);
  --text-inverse: oklch(96.74% 0.0013 286.38);

  /* Borders & Focus */
  --color-border: oklch(91.97% 0.0040 286.32);
  --color-border-subtle: oklch(96.74% 0.0013 286.38);
  --color-border-accent: oklch(86.90% 0.0198 252.89);
  --color-border-focus: oklch(60.02% 0.1038 184.70 / 0.4);

  --border-color: oklch(91.97% 0.0040 286.32);
  --border-subtle: oklch(96.74% 0.0013 286.38);
  --border-accent: oklch(86.90% 0.0198 252.89);

  /* Status / Feedback */
  --color-success: oklch(59.60% 0.1274 163.23);
  --color-success-bg: oklch(97.93% 0.0207 166.11);
  --color-success-border: oklch(90.49% 0.0895 164.15);
  --color-success-text: oklch(43.18% 0.0865 166.91);
  --success: oklch(59.60% 0.1274 163.23);

  --color-warning: oklch(66.58% 0.1574 58.32);
  --color-warning-bg: oklch(98.69% 0.0214 95.28);
  --color-warning-border: oklch(92.43% 0.1151 95.75);
  --color-warning-text: oklch(47.32% 0.1247 46.20);
  --warning: oklch(66.58% 0.1574 58.32);

  --color-danger: oklch(57.71% 0.2152 27.33);
  --color-danger-bg: oklch(97.05% 0.0129 17.38);
  --color-danger-border: oklch(88.45% 0.0593 18.33);
  --color-danger-text: oklch(44.37% 0.1613 26.90);
  --danger: oklch(57.71% 0.2152 27.33);

  --color-info: oklch(58.76% 0.1389 241.97);
  --color-info-bg: oklch(97.71% 0.0125 236.62);
  --color-info-border: oklch(90.14% 0.0555 230.90);
  --color-info-text: oklch(44.34% 0.1000 240.79);
  --info: oklch(58.76% 0.1389 241.97);
}

/* ==========================================================================
   7. DARK MODE OVERRIDES
   Applied when:
   - System/browser prefers dark scheme and [data-theme="light"] is NOT active
   - Explicit [data-theme="dark"] is set on root or container
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Shadows (Dark Elevation) */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 3px oklch(0 0 0 / 0.40);
    --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.40), 0 2px 4px -2px oklch(0 0 0 / 0.30);
    --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.50), 0 4px 6px -4px oklch(0 0 0 / 0.40);
    --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.60), 0 8px 10px -6px oklch(0 0 0 / 0.50);
    --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.85);
    --shadow-glow-brand: 0 0 20px -3px oklch(78.45% 0.1325 181.91 / 0.35);
    --shadow-glow-purple: 0 0 24px -2px oklch(55.75% 0.2525 302.32 / 0.25);
    --shadow-glow-blue: 0 0 20px -3px oklch(75.35% 0.1390 232.66 / 0.35);

    /* Brand / Primary (NC Canonical Teal) */
    --color-brand: oklch(78.45% 0.1325 181.91);
    --color-brand-hover: oklch(85.49% 0.1251 181.07);
    --color-brand-active: oklch(70.38% 0.1230 182.50);
    --color-brand-subtle: oklch(78.45% 0.1325 181.91 / 0.12);
    --color-brand-contrast: oklch(27.73% 0.0447 192.52);

    --color-primary: oklch(78.45% 0.1325 181.91);
    --brand-primary: oklch(78.45% 0.1325 181.91);

    /* Accent */
    --color-accent: oklch(78.45% 0.1325 181.91);
    --color-accent-hover: oklch(85.49% 0.1251 181.07);
    --color-accent-blue: oklch(75.35% 0.1390 232.66);
    --color-accent-purple: oklch(55.75% 0.2525 302.32);
    --color-accent-purple-glow: oklch(55.75% 0.2525 302.32 / 0.25);
    --accent: oklch(78.45% 0.1325 181.91);

    /* Backgrounds (Zinc / Carbon) */
    --color-bg-page: oklch(14.08% 0.0044 285.82);
    --color-bg-surface: oklch(18.36% 0.0061 285.79);
    --color-bg-elevated: oklch(21.13% 0.0098 285.53);
    --color-bg-overlay: oklch(0 0 0 / 0.75);
    --color-bg-input: oklch(21.13% 0.0098 285.53);

    --bg-page: oklch(14.08% 0.0044 285.82);
    --bg-surface: oklch(18.36% 0.0061 285.79);
    --bg-elevated: oklch(21.13% 0.0098 285.53);

    /* Text */
    --color-text-primary: oklch(96.74% 0.0013 286.38);
    --color-text-secondary: oklch(71.18% 0.0129 286.07);
    --color-text-muted: oklch(71.18% 0.0129 286.07);
    --color-text-inverse: oklch(14.08% 0.0044 285.82);
    --color-text-heading: oklch(100% 0 0);
    --color-text-on-brand: oklch(27.73% 0.0447 192.52);

    --text-primary: oklch(96.74% 0.0013 286.38);
    --text-secondary: oklch(71.18% 0.0129 286.07);
    --text-muted: oklch(71.18% 0.0129 286.07);
    --text-inverse: oklch(14.08% 0.0044 285.82);

    /* Borders & Focus */
    --color-border: oklch(100% 0 0 / 0.08);
    --color-border-subtle: oklch(100% 0 0 / 0.04);
    --color-border-accent: oklch(100% 0 0 / 0.16);
    --color-border-focus: oklch(78.45% 0.1325 181.91 / 0.4);

    --border-color: oklch(100% 0 0 / 0.08);
    --border-subtle: oklch(100% 0 0 / 0.04);
    --border-accent: oklch(100% 0 0 / 0.16);

    /* Status / Feedback */
    --color-success: oklch(69.59% 0.1491 162.48);
    --color-success-bg: oklch(69.59% 0.1491 162.48 / 0.12);
    --color-success-border: oklch(69.59% 0.1491 162.48 / 0.28);
    --color-success-text: oklch(77.29% 0.1535 163.22);
    --success: oklch(69.59% 0.1491 162.48);

    --color-warning: oklch(76.86% 0.1647 70.08);
    --color-warning-bg: oklch(76.86% 0.1647 70.08 / 0.12);
    --color-warning-border: oklch(76.86% 0.1647 70.08 / 0.28);
    --color-warning-text: oklch(83.69% 0.1644 84.43);
    --warning: oklch(76.86% 0.1647 70.08);

    --color-danger: oklch(63.68% 0.2078 25.33);
    --color-danger-bg: oklch(63.68% 0.2078 25.33 / 0.12);
    --color-danger-border: oklch(63.68% 0.2078 25.33 / 0.28);
    --color-danger-text: oklch(71.06% 0.1661 22.22);
    --danger: oklch(63.68% 0.2078 25.33);

    --color-info: oklch(75.35% 0.1390 232.66);
    --color-info-bg: oklch(75.35% 0.1390 232.66 / 0.12);
    --color-info-border: oklch(75.35% 0.1390 232.66 / 0.28);
    --color-info-text: oklch(82.76% 0.1013 230.32);
    --info: oklch(75.35% 0.1390 232.66);
  }
}

/* Explicit data-theme="dark" attribute support */
[data-theme="dark"] {
  /* Shadows (Dark Elevation) */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 3px oklch(0 0 0 / 0.40);
  --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.40), 0 2px 4px -2px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.50), 0 4px 6px -4px oklch(0 0 0 / 0.40);
  --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.60), 0 8px 10px -6px oklch(0 0 0 / 0.50);
  --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.85);
  --shadow-glow-brand: 0 0 20px -3px oklch(78.45% 0.1325 181.91 / 0.35);
  --shadow-glow-purple: 0 0 24px -2px oklch(55.75% 0.2525 302.32 / 0.25);
  --shadow-glow-blue: 0 0 20px -3px oklch(75.35% 0.1390 232.66 / 0.35);

  /* Brand / Primary (NC Canonical Teal) */
  --color-brand: oklch(78.45% 0.1325 181.91);
  --color-brand-hover: oklch(85.49% 0.1251 181.07);
  --color-brand-active: oklch(70.38% 0.1230 182.50);
  --color-brand-subtle: oklch(78.45% 0.1325 181.91 / 0.12);
  --color-brand-contrast: oklch(27.73% 0.0447 192.52);

  --color-primary: oklch(78.45% 0.1325 181.91);
  --brand-primary: oklch(78.45% 0.1325 181.91);

  /* Accent */
  --color-accent: oklch(78.45% 0.1325 181.91);
  --color-accent-hover: oklch(85.49% 0.1251 181.07);
  --color-accent-blue: oklch(75.35% 0.1390 232.66);
  --color-accent-purple: oklch(55.75% 0.2525 302.32);
  --color-accent-purple-glow: oklch(55.75% 0.2525 302.32 / 0.25);
  --accent: oklch(78.45% 0.1325 181.91);

  /* Backgrounds (Zinc / Carbon) */
  --color-bg-page: oklch(14.08% 0.0044 285.82);
  --color-bg-surface: oklch(18.36% 0.0061 285.79);
  --color-bg-elevated: oklch(21.13% 0.0098 285.53);
  --color-bg-overlay: oklch(0 0 0 / 0.75);
  --color-bg-input: oklch(21.13% 0.0098 285.53);

  --bg-page: oklch(14.08% 0.0044 285.82);
  --bg-surface: oklch(18.36% 0.0061 285.79);
  --bg-elevated: oklch(21.13% 0.0098 285.53);

  /* Text */
  --color-text-primary: oklch(96.74% 0.0013 286.38);
  --color-text-secondary: oklch(71.18% 0.0129 286.07);
  --color-text-muted: oklch(71.18% 0.0129 286.07);
  --color-text-inverse: oklch(14.08% 0.0044 285.82);
  --color-text-heading: oklch(100% 0 0);
  --color-text-on-brand: oklch(27.73% 0.0447 192.52);

  --text-primary: oklch(96.74% 0.0013 286.38);
  --text-secondary: oklch(71.18% 0.0129 286.07);
  --text-muted: oklch(71.18% 0.0129 286.07);
  --text-inverse: oklch(14.08% 0.0044 285.82);

  /* Borders & Focus */
  --color-border: oklch(100% 0 0 / 0.08);
  --color-border-subtle: oklch(100% 0 0 / 0.04);
  --color-border-accent: oklch(100% 0 0 / 0.16);
  --color-border-focus: oklch(78.45% 0.1325 181.91 / 0.4);

  --border-color: oklch(100% 0 0 / 0.08);
  --border-subtle: oklch(100% 0 0 / 0.04);
  --border-accent: oklch(100% 0 0 / 0.16);

  /* Status / Feedback */
  --color-success: oklch(69.59% 0.1491 162.48);
  --color-success-bg: oklch(69.59% 0.1491 162.48 / 0.12);
  --color-success-border: oklch(69.59% 0.1491 162.48 / 0.28);
  --color-success-text: oklch(77.29% 0.1535 163.22);
  --success: oklch(69.59% 0.1491 162.48);

  --color-warning: oklch(76.86% 0.1647 70.08);
  --color-warning-bg: oklch(76.86% 0.1647 70.08 / 0.12);
  --color-warning-border: oklch(76.86% 0.1647 70.08 / 0.28);
  --color-warning-text: oklch(83.69% 0.1644 84.43);
  --warning: oklch(76.86% 0.1647 70.08);

  --color-danger: oklch(63.68% 0.2078 25.33);
  --color-danger-bg: oklch(63.68% 0.2078 25.33 / 0.12);
  --color-danger-border: oklch(63.68% 0.2078 25.33 / 0.28);
  --color-danger-text: oklch(71.06% 0.1661 22.22);
  --danger: oklch(63.68% 0.2078 25.33);

  --color-info: oklch(75.35% 0.1390 232.66);
  --color-info-bg: oklch(75.35% 0.1390 232.66 / 0.12);
  --color-info-border: oklch(75.35% 0.1390 232.66 / 0.28);
  --color-info-text: oklch(82.76% 0.1013 230.32);
  --info: oklch(75.35% 0.1390 232.66);
}