@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
/**
 * Theme: kflow
 * Generated by Orbital Compiler
 */

/* ==========================================================================
 * LIGHT MODE
 * ========================================================================== */
[data-theme="kflow-light"] {
  /* Colors */
  --color-accent: #0e7490;
  --color-accent-foreground: #ffffff;
  --color-background: #f7f8fc;
  --color-border: #e1e5f1;
  --color-card: #ffffff;
  --color-card-foreground: #0b1026;
  --color-error: #dc2626;
  --color-error-foreground: #ffffff;
  --color-foreground: #0b1026;
  --color-info: #0369a1;
  --color-info-foreground: #ffffff;
  --color-input: #c9d0e3;
  --color-muted: #eef1f8;
  --color-muted-foreground: #535d75;
  --color-primary: #4f46e5;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #4338ca;
  --color-ring: #4f46e5;
  --color-secondary: #eef0fb;
  --color-secondary-foreground: #1e1b4b;
  --color-secondary-hover: #e0e4f7;
  --color-success: #047857;
  --color-success-foreground: #ffffff;
  --color-surface: #f0f2fa;
  --color-warning: #b45309;
  --color-warning-foreground: #ffffff;
  --color-scrim: rgba(11, 16, 38, 0.55);
  --color-series-1: #0891b2;
  --color-series-2: #c026d3;
  --color-series-3: #65a30d;
  --color-series-4: #ea580c;
  --color-series-5: #db2777;
  --color-series-6: #2563eb;
  --color-series-7: #854d0e;
  --color-series-8: #0d9488;
  --color-diagram-ink: #0b1026;
  --color-diagram-label: #475069;
  --color-diagram-guide: #94a0bd;
  --color-diagram-axis: #2f3754;
  --color-diagram-grid: #e1e5f1;
  --color-diagram-highlight: #4f46e5;
  --color-diagram-fill: #e0e7ff;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-xl: 22px;

  /* Border Width */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-thin: 1px;

  /* Typography */
  --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-bold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --letter-spacing: -0.005em;
  --line-height: 1.6;

  /* Shadows */
  --shadow-active: 0 2px 6px -2px rgba(79, 70, 229, 0.24);
  --shadow-hover: 0 14px 32px -10px rgba(79, 70, 229, 0.32), 0 4px 10px rgba(16, 185, 129, 0.10);
  --shadow-inner: inset 0 1px 2px rgba(79, 70, 229, 0.10);
  --shadow-lg: 0 24px 48px -12px rgba(79, 70, 229, 0.28), 0 6px 16px rgba(8, 145, 178, 0.10);
  --shadow-main: 0 8px 24px -8px rgba(79, 70, 229, 0.20), 0 2px 6px rgba(8, 145, 178, 0.08);
  --shadow-none: none;
  --shadow-sm: 0 2px 8px -2px rgba(79, 70, 229, 0.16);

  /* Transitions */
  --transition-fast: 100ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --transition-timing: ease-in-out;

  /* Transforms */
  --active-scale: 0.98;
  --active-translate-y: 1px;
  --hover-scale: 1.02;
  --hover-translate-x: 0;
  --hover-translate-y: -2px;

  /* Focus */
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  /* Icon */
  --icon-color: currentColor;
  --icon-stroke-width: 2;

  /* Type */
  --font-family-display: "Fraunces", "IBM Plex Sans Arabic", Georgia, serif;
  --font-family-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --heading-weight: 600;
  --heading-transform: none;
  --heading-tracking: -0.02em;
  --heading-style: normal;
  --heading-shadow: none;

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --duration-dramatic: 640ms;
  --easing-linear: linear;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
  --motion-modal-exit-to-transform: scale(0.98);
  --motion-popover-enter-from-transform: scale(0.97);
  --motion-popover-exit-to-transform: scale(0.97);
  --motion-toast-enter-from-transform: translateY(-12px);
  --motion-toast-exit-to-transform: translateY(-12px);
  --motion-page-enter-from-transform: translateY(10px);

  /* Iconography */
  --icon-family: lucide;
  --icon-stroke-width: 1.75;
  --icon-default-size: 16px;

  /* Elevation */
  --elevation-card: var(--shadow-main);
  --elevation-popover: var(--shadow-lg);
  --elevation-dialog: var(--shadow-lg);
  --elevation-toast: var(--shadow-main);
  --elevation-interactive: var(--shadow-sm);
  --elevation-pressed: var(--shadow-inner);

  /* Geometry */
  --radius-container: 16px;
  --radius-interactive: 12px;
  --radius-pill: 9999px;
  --border-hairline: 1px;
  --border-standard: 1px;
  --border-heavy: 2px;
  --corner-shape: superellipse(1.5);
  --corner-shape-pill: superellipse(1.5);
  --border-style: solid;
  --border-style-interactive: solid;

  /* Surface */
  --surface-card-image: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(34, 211, 238, 0.05) 55%, rgba(16, 185, 129, 0.06) 100%);
  --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
  --surface-edge-height: clamp(24px, 6vw, 96px);
  --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
  --surface-texture-size: 24px 24px;
  --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);

  /* Diagram */
  --diagram-stroke-thin: 1px;
  --diagram-stroke-normal: 2px;
  --diagram-stroke-bold: 3px;
  --diagram-line-cap: round;
  --diagram-line-join: round;
  --diagram-dash: 6 4;
  --diagram-dot: 1 5;
  --diagram-fill-style: tint;
  --diagram-fill-opacity: 0.2;
  --diagram-roughness: 0;
  --diagram-glow: 2;
  --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
  --diagram-marker: triangle;
  --diagram-label-font: body;
  --diagram-label-size: sm;
  --diagram-label-weight: 500;
  --diagram-label-case: none;
  --diagram-corner: 8px;

  /* Scene */
  --material-roughness: 0.25;
  --material-metalness: 0.15;
  --material-flat: 0;
  --material-outline: 0;
  --light-ambient: 0.5;
  --light-key: 1.15;
  --light-key-color: #eef2ff;
  --scene-fog: 0.05;

}

/* ==========================================================================
 * DARK MODE
 * ========================================================================== */
[data-theme="kflow-dark"] {
  /* Colors */
  --color-accent: #22d3ee;
  --color-accent-foreground: #04131a;
  --color-background: #070b1a;
  --color-border: #222b52;
  --color-card: #0e1430;
  --color-card-foreground: #e6e9f5;
  --color-error: #f87171;
  --color-error-foreground: #000000;
  --color-foreground: #e6e9f5;
  --color-info: #38bdf8;
  --color-info-foreground: #000000;
  --color-input: #2e3866;
  --color-muted: #141b3a;
  --color-muted-foreground: #9aa4c0;
  --color-primary: #818cf8;
  --color-primary-foreground: #0b1026;
  --color-primary-hover: #a5b4fc;
  --color-ring: #818cf8;
  --color-secondary: #161d40;
  --color-secondary-foreground: #e6e9f5;
  --color-secondary-hover: #1f2852;
  --color-success: #34d399;
  --color-success-foreground: #022c22;
  --color-surface: #121a3a;
  --color-warning: #fbbf24;
  --color-warning-foreground: #000000;
  --color-scrim: rgba(0, 0, 0, 0.7);
  --color-series-1: #22d3ee;
  --color-series-2: #e879f9;
  --color-series-3: #a3e635;
  --color-series-4: #fb923c;
  --color-series-5: #f472b6;
  --color-series-6: #60a5fa;
  --color-series-7: #fef08a;
  --color-series-8: #2dd4bf;
  --color-diagram-ink: #e6e9f5;
  --color-diagram-label: #9aa4c0;
  --color-diagram-guide: #5d6890;
  --color-diagram-axis: #c7cde3;
  --color-diagram-grid: #222b52;
  --color-diagram-highlight: #818cf8;
  --color-diagram-fill: #232c63;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-xl: 22px;

  /* Border Width */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-thin: 1px;

  /* Typography */
  --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-bold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --letter-spacing: -0.005em;
  --line-height: 1.6;

  /* Shadows */
  --shadow-active: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 14px 36px -10px rgba(99, 102, 241, 0.35);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7), 0 0 32px -8px rgba(99, 102, 241, 0.25);
  --shadow-main: 0 8px 28px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(129, 140, 248, 0.08);
  --shadow-none: none;
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --transition-fast: 100ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  --transition-timing: ease-in-out;

  /* Transforms */
  --active-scale: 0.98;
  --active-translate-y: 1px;
  --hover-scale: 1.02;
  --hover-translate-x: 0;
  --hover-translate-y: -2px;

  /* Focus */
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;

  /* Icon */
  --icon-color: currentColor;
  --icon-stroke-width: 2;

  /* Type */
  --font-family-display: "Fraunces", "IBM Plex Sans Arabic", Georgia, serif;
  --font-family-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --heading-weight: 600;
  --heading-transform: none;
  --heading-tracking: -0.02em;
  --heading-style: normal;
  --heading-shadow: none;

  /* Motion */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --duration-dramatic: 640ms;
  --easing-linear: linear;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
  --motion-modal-exit-to-transform: scale(0.98);
  --motion-popover-enter-from-transform: scale(0.97);
  --motion-popover-exit-to-transform: scale(0.97);
  --motion-toast-enter-from-transform: translateY(-12px);
  --motion-toast-exit-to-transform: translateY(-12px);
  --motion-page-enter-from-transform: translateY(10px);

  /* Iconography */
  --icon-family: lucide;
  --icon-stroke-width: 1.75;
  --icon-default-size: 16px;

  /* Elevation */
  --elevation-card: var(--shadow-main);
  --elevation-popover: var(--shadow-lg);
  --elevation-dialog: var(--shadow-lg);
  --elevation-toast: var(--shadow-main);
  --elevation-interactive: var(--shadow-sm);
  --elevation-pressed: var(--shadow-inner);

  /* Geometry */
  --radius-container: 16px;
  --radius-interactive: 12px;
  --radius-pill: 9999px;
  --border-hairline: 1px;
  --border-standard: 1px;
  --border-heavy: 2px;
  --corner-shape: superellipse(1.5);
  --corner-shape-pill: superellipse(1.5);
  --border-style: solid;
  --border-style-interactive: solid;

  /* Surface */
  --surface-card-image: linear-gradient(135deg, rgba(129, 140, 248, 0.10) 0%, rgba(34, 211, 238, 0.06) 55%, rgba(52, 211, 153, 0.07) 100%);

  /* Diagram */
  --diagram-stroke-thin: 1px;
  --diagram-stroke-normal: 2px;
  --diagram-stroke-bold: 3px;
  --diagram-line-cap: round;
  --diagram-line-join: round;
  --diagram-dash: 6 4;
  --diagram-dot: 1 5;
  --diagram-fill-style: tint;
  --diagram-fill-opacity: 0.2;
  --diagram-roughness: 0;
  --diagram-glow: 2;
  --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
  --diagram-marker: triangle;
  --diagram-label-font: body;
  --diagram-label-size: sm;
  --diagram-label-weight: 500;
  --diagram-label-case: none;
  --diagram-corner: 8px;

  /* Scene */
  --material-roughness: 0.25;
  --material-metalness: 0.15;
  --material-flat: 0;
  --material-outline: 0;
  --light-ambient: 0.5;
  --light-key: 1.15;
  --light-key-color: #eef2ff;
  --scene-fog: 0.05;

}