/* =============================================================================
   apex/design/tokens.css — hellojade canvas design tokens (CSS custom props)
   REFERENCE COPY, generated from tokens.js. The canvas app consumes tokens.js;
   this mirror is for DOM/devtools reference and documents every token name.
   Select a mode with data-kind="light" | "dark" on :root.
   Gradient / viz-series tokens are JSON arrays (consumed by canvas JS, not CSS).
   ============================================================================= */

:root[data-kind="light"] {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --border-1: 1px;
  --border-2: 1.5px;
  --border-3: 2px;
  --motion-dur-fast: 120ms;
  --motion-dur-base: 200ms;
  --motion-dur-slow: 360ms;
  --motion-dur-slower: 600ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1);
  --motion-ease-back: cubic-bezier(0.36, 0, 0.66, -0.56);
  --motion-shake-sm: 2px;
  --motion-shake-md: 3px;
  --type-scale-xs: clamp(10.5px, 0.55vw + 9px, 12px);
  --type-scale-sm: clamp(12px,   0.5vw  + 10px, 13.5px);
  --type-scale-md: clamp(13.5px, 0.6vw  + 11px, 15px);
  --type-scale-lg: clamp(15px,   0.8vw  + 13px, 18px);
  --type-scale-xl: clamp(18px,   1vw    + 15px, 22px);
  --type-scale-2xl: clamp(22px,   1.6vw  + 18px, 28px);
  --type-scale-3xl: clamp(26px,   2vw    + 21px, 36px);
  --type-scale-display: clamp(40px,   5vw    + 24px, 64px);
  --type-scale-xs-static: 11px;
  --type-scale-sm-static: 13px;
  --type-scale-md-static: 15px;
  --type-scale-lg-static: 18px;
  --line-height-tight: 1.05;
  --line-height-snug: 1.25;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;
  --letter-tight: -0.02em;
  --letter-tighter: -0.025em;
  --letter-wide: 0.04em;
  --letter-wider: 0.08em;
  --letter-widest: 0.10em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  --size-avatar-sm: 36px;
  --size-avatar-md: 40px;
  --size-fab: 56px;
  --size-nav-rail: 200px;
  --size-hero-canvas: 360px;
  --size-clearspace: 360px;
  --grid-tile-xs: 110px;
  --grid-tile-sm: 140px;
  --grid-tile-md: 160px;
  --grid-tile-lg: 180px;
  --grid-tile-xl: 220px;
  --grid-tile-2xl: 280px;
  --size-color-chip-h: 48px;
  --size-swatch-chip-h: 50px;
  --size-mockup-min-h: 320px;
  --size-pre-max-h: 320px;
  --size-pre-max-h-lg: 360px;
  --size-export-max-h: 220px;
  --color-bg: #FBFAF5;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1EFE4;
  --color-fg: #0F2A26;
  --color-fg-muted: #3D544F;
  --color-fg-subtle: #8A9994;
  --color-border: #E2DECF;
  --color-border-strong: #B6AE93;
  --color-primary: #0F7B6C;
  --color-primary-fg: #FBFAF5;
  --color-primary-hover: #0B5F54;
  --color-accent: #D4A85A;
  --color-accent-fg: #0F2A26;
  --color-success: #0F7B6C;
  --color-success-fg: #FBFAF5;
  --color-warning: #D4A85A;
  --color-warning-fg: #0F2A26;
  --color-danger: #A14246;
  --color-danger-fg: #FBFAF5;
  --color-info: #3F8FA8;
  --color-focus-ring: #0F7B6C;
  --color-bg-p3: color(display-p3 0.9832 0.9813 0.9626);
  --color-surface-p3: color(display-p3 0.9996 1 1);
  --color-fg-p3: color(display-p3 0.0864 0.1623 0.1491);
  --color-primary-p3: color(display-p3 0.2183 0.475 0.4249);
  --color-primary-hover-p3: color(display-p3 0.1644 0.3668 0.3301);
  --color-accent-p3: color(display-p3 0.8039 0.6664 0.3997);
  --color-success-p3: color(display-p3 0.2183 0.475 0.4249);
  --color-warning-p3: color(display-p3 0.8039 0.6664 0.3997);
  --color-danger-p3: color(display-p3 0.586 0.2831 0.2844);
  --color-info-p3: color(display-p3 0.3311 0.5538 0.6478);
  --color-focus-ring-p3: color(display-p3 0.2183 0.475 0.4249);
  --color-primary-50: #c8fff7;
  --color-primary-100: #bbfaed;
  --color-primary-200: #a5e8da;
  --color-primary-300: #87d0c1;
  --color-primary-400: #63b5a5;
  --color-primary-500: #3a9888;
  --color-primary-600: #267f70;
  --color-primary-700: #0e6457;
  --color-primary-800: #004c42;
  --color-primary-900: #00382f;
  --color-accent-50: #fff1bc;
  --color-accent-100: #ffe6b0;
  --color-accent-200: #f5d399;
  --color-accent-300: #dfba7b;
  --color-accent-400: #c49c57;
  --color-accent-500: #a87e2d;
  --color-accent-600: #8d671a;
  --color-accent-700: #704f01;
  --color-accent-800: #573a00;
  --color-accent-900: #422800;
  --color-success-50: #c8fff7;
  --color-success-100: #bbfaed;
  --color-success-200: #a5e8da;
  --color-success-300: #87d0c1;
  --color-success-400: #63b5a5;
  --color-success-500: #3a9888;
  --color-success-600: #267f70;
  --color-success-700: #0e6457;
  --color-success-800: #004c42;
  --color-success-900: #00382f;
  --color-warning-50: #fff1bc;
  --color-warning-100: #ffe6b0;
  --color-warning-200: #f5d399;
  --color-warning-300: #dfba7b;
  --color-warning-400: #c49c57;
  --color-warning-500: #a87e2d;
  --color-warning-600: #8d671a;
  --color-warning-700: #704f01;
  --color-warning-800: #573a00;
  --color-warning-900: #422800;
  --color-danger-50: #ffdfdd;
  --color-danger-100: #ffd4d2;
  --color-danger-200: #ffbfbd;
  --color-danger-300: #fda4a3;
  --color-danger-400: #e38585;
  --color-danger-500: #c76466;
  --color-danger-600: #a84f51;
  --color-danger-700: #87393c;
  --color-danger-800: #6b2629;
  --color-danger-900: #52151a;
  --color-info-50: #caffff;
  --color-info-100: #bef5ff;
  --color-info-200: #a8e3f7;
  --color-info-300: #8bcbe1;
  --color-info-400: #68afc6;
  --color-info-500: #4292ab;
  --color-info-600: #2f7990;
  --color-info-700: #1a5f73;
  --color-info-800: #034859;
  --color-info-900: #003444;
  --gradient-brand: [[0,"#0F7B6C"],[1,"#0B5F54"]];
  --gradient-surface: [[0,"#FFFFFF"],[1,"#F1EFE4"]];
  --gradient-accent-sheen: [[0,"rgba(212, 168, 90, 0)"],[0.5,"rgba(212, 168, 90, 0.55)"],[1,"rgba(212, 168, 90, 0)"]];
  --glow-primary: rgba(15, 123, 108, 0.35);
  --glow-accent: rgba(212, 168, 90, 0.4);
  --elevation-1-color: rgba(15, 42, 38, 0.1);
  --elevation-1-blur: 4px;
  --elevation-2-color: rgba(15, 42, 38, 0.16);
  --elevation-2-blur: 24px;
  --elevation-3-color: rgba(15, 42, 38, 0.22);
  --elevation-3-blur: 48px;
  --focus-ring-color: #0F7B6C;
  --focus-ring-color-p3: color(display-p3 0.2183 0.475 0.4249);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-halo: rgba(15, 123, 108, 0.28);
  --grid-line: rgba(15, 42, 38, 0.06);
  --grid-line-strong: rgba(15, 42, 38, 0.12);
  --guide-line: rgba(15, 123, 108, 0.4);
  --viz-1: #009683;
  --viz-2: #258abb;
  --viz-3: #698e3f;
  --viz-4: #8b6fba;
  --viz-5: #ab7225;
  --viz-6: #b7617d;
  --viz-7: #0092a6;
  --viz-8: #bb6456;
  --viz-series: ["#009683","#258abb","#698e3f","#8b6fba","#ab7225","#b7617d","#0092a6","#bb6456"];
  --overlay-hover: rgba(15, 42, 38, 0.05);
  --overlay-press: rgba(15, 42, 38, 0.1);
  --overlay-selected: rgba(15, 123, 108, 0.14);
  --overlay-selected-border: rgba(15, 123, 108, 0.5);
  --scrim: rgba(15, 42, 38, 0.45);
  --backdrop-blur: 12px;
  --alpha-fg-4: rgba(15, 42, 38, 0.04);
  --alpha-fg-8: rgba(15, 42, 38, 0.08);
  --alpha-fg-12: rgba(15, 42, 38, 0.12);
  --alpha-fg-16: rgba(15, 42, 38, 0.16);
  --alpha-fg-24: rgba(15, 42, 38, 0.24);
  --alpha-fg-40: rgba(15, 42, 38, 0.4);
  --alpha-fg-64: rgba(15, 42, 38, 0.64);
  --alpha-primary-8: rgba(15, 123, 108, 0.08);
  --alpha-primary-16: rgba(15, 123, 108, 0.16);
  --alpha-primary-24: rgba(15, 123, 108, 0.24);
  --alpha-primary-40: rgba(15, 123, 108, 0.4);
  --alpha-primary-64: rgba(15, 123, 108, 0.64);
  --shadow-sm: 0px 1px 4px -2px rgba(15, 42, 38, 0.10);
  --shadow-md: 0px 6px 24px -6px rgba(15, 42, 38, 0.16);
}

:root[data-kind="dark"] {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --border-1: 1px;
  --border-2: 1.5px;
  --border-3: 2px;
  --motion-dur-fast: 120ms;
  --motion-dur-base: 200ms;
  --motion-dur-slow: 360ms;
  --motion-dur-slower: 600ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1);
  --motion-ease-back: cubic-bezier(0.36, 0, 0.66, -0.56);
  --motion-shake-sm: 2px;
  --motion-shake-md: 3px;
  --type-scale-xs: clamp(10.5px, 0.55vw + 9px, 12px);
  --type-scale-sm: clamp(12px,   0.5vw  + 10px, 13.5px);
  --type-scale-md: clamp(13.5px, 0.6vw  + 11px, 15px);
  --type-scale-lg: clamp(15px,   0.8vw  + 13px, 18px);
  --type-scale-xl: clamp(18px,   1vw    + 15px, 22px);
  --type-scale-2xl: clamp(22px,   1.6vw  + 18px, 28px);
  --type-scale-3xl: clamp(26px,   2vw    + 21px, 36px);
  --type-scale-display: clamp(40px,   5vw    + 24px, 64px);
  --type-scale-xs-static: 11px;
  --type-scale-sm-static: 13px;
  --type-scale-md-static: 15px;
  --type-scale-lg-static: 18px;
  --line-height-tight: 1.05;
  --line-height-snug: 1.25;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;
  --letter-tight: -0.02em;
  --letter-tighter: -0.025em;
  --letter-wide: 0.04em;
  --letter-wider: 0.08em;
  --letter-widest: 0.10em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  --size-avatar-sm: 36px;
  --size-avatar-md: 40px;
  --size-fab: 56px;
  --size-nav-rail: 200px;
  --size-hero-canvas: 360px;
  --size-clearspace: 360px;
  --grid-tile-xs: 110px;
  --grid-tile-sm: 140px;
  --grid-tile-md: 160px;
  --grid-tile-lg: 180px;
  --grid-tile-xl: 220px;
  --grid-tile-2xl: 280px;
  --size-color-chip-h: 48px;
  --size-swatch-chip-h: 50px;
  --size-mockup-min-h: 320px;
  --size-pre-max-h: 320px;
  --size-pre-max-h-lg: 360px;
  --size-export-max-h: 220px;
  --color-bg: #0A1F1B;
  --color-surface: #0F2A26;
  --color-surface-hover: #173A33;
  --color-fg: #F1EFE4;
  --color-fg-muted: #B5BFB9;
  --color-fg-subtle: #7B8A85;
  --color-border: #22463E;
  --color-border-strong: #3E665B;
  --color-primary: #3FB89F;
  --color-primary-fg: #0A1F1B;
  --color-primary-hover: #5FCAB4;
  --color-accent: #E5C075;
  --color-accent-fg: #0A1F1B;
  --color-success: #3FB89F;
  --color-success-fg: #0A1F1B;
  --color-warning: #E5C075;
  --color-warning-fg: #0A1F1B;
  --color-danger: #D27474;
  --color-danger-fg: #0A1F1B;
  --color-info: #6FB6CC;
  --color-focus-ring: #3FB89F;
  --color-bg-p3: color(display-p3 0.0603 0.1197 0.1063);
  --color-surface-p3: color(display-p3 0.0864 0.1623 0.1491);
  --color-fg-p3: color(display-p3 0.9433 0.9383 0.8982);
  --color-primary-p3: color(display-p3 0.3899 0.7119 0.6272);
  --color-primary-hover-p3: color(display-p3 0.4833 0.7828 0.7086);
  --color-accent-p3: color(display-p3 0.8742 0.7592 0.4994);
  --color-success-p3: color(display-p3 0.3899 0.7119 0.6272);
  --color-warning-p3: color(display-p3 0.8742 0.7592 0.4994);
  --color-danger-p3: color(display-p3 0.7739 0.4747 0.4645);
  --color-info-p3: color(display-p3 0.4996 0.7069 0.7896);
  --color-focus-ring-p3: color(display-p3 0.3899 0.7119 0.6272);
  --color-primary-50: #bdfff4;
  --color-primary-100: #b0fee9;
  --color-primary-200: #98ebd6;
  --color-primary-300: #78d4be;
  --color-primary-400: #50b8a1;
  --color-primary-500: #109c84;
  --color-primary-600: #00826d;
  --color-primary-700: #006754;
  --color-primary-800: #004f3f;
  --color-primary-900: #003a2d;
  --color-accent-50: #fff2bf;
  --color-accent-100: #ffe8b3;
  --color-accent-200: #f1d49c;
  --color-accent-300: #dabb7f;
  --color-accent-400: #bf9e5c;
  --color-accent-500: #a38034;
  --color-accent-600: #896922;
  --color-accent-700: #6d510c;
  --color-accent-800: #543c00;
  --color-accent-900: #3f2900;
  --color-success-50: #bdfff4;
  --color-success-100: #b0fee9;
  --color-success-200: #98ebd6;
  --color-success-300: #78d4be;
  --color-success-400: #50b8a1;
  --color-success-500: #109c84;
  --color-success-600: #00826d;
  --color-success-700: #006754;
  --color-success-800: #004f3f;
  --color-success-900: #003a2d;
  --color-warning-50: #fff2bf;
  --color-warning-100: #ffe8b3;
  --color-warning-200: #f1d49c;
  --color-warning-300: #dabb7f;
  --color-warning-400: #bf9e5c;
  --color-warning-500: #a38034;
  --color-warning-600: #896922;
  --color-warning-700: #6d510c;
  --color-warning-800: #543c00;
  --color-warning-900: #3f2900;
  --color-danger-50: #ffe0de;
  --color-danger-100: #ffd5d3;
  --color-danger-200: #ffc1bf;
  --color-danger-300: #f9a6a4;
  --color-danger-400: #df8786;
  --color-danger-500: #c36767;
  --color-danger-600: #a55253;
  --color-danger-700: #853c3d;
  --color-danger-800: #69292b;
  --color-danger-900: #50181b;
  --color-info-50: #ceffff;
  --color-info-100: #c2f5ff;
  --color-info-200: #ade2f4;
  --color-info-300: #90cadd;
  --color-info-400: #6faec2;
  --color-info-500: #4a91a7;
  --color-info-600: #37798c;
  --color-info-700: #235e6f;
  --color-info-800: #0f4856;
  --color-info-900: #003441;
  --gradient-brand: [[0,"#3FB89F"],[1,"#2E9A84"]];
  --gradient-surface: [[0,"#0F2A26"],[1,"#173A33"]];
  --gradient-accent-sheen: [[0,"rgba(229, 192, 117, 0)"],[0.5,"rgba(229, 192, 117, 0.7)"],[1,"rgba(229, 192, 117, 0)"]];
  --glow-primary: rgba(63, 184, 159, 0.5);
  --glow-accent: rgba(229, 192, 117, 0.55);
  --elevation-1-color: rgba(0, 0, 0, 0.5);
  --elevation-1-blur: 4px;
  --elevation-2-color: rgba(0, 0, 0, 0.6);
  --elevation-2-blur: 24px;
  --elevation-3-color: rgba(0, 0, 0, 0.7);
  --elevation-3-blur: 48px;
  --focus-ring-color: #3FB89F;
  --focus-ring-color-p3: color(display-p3 0.3899 0.7119 0.6272);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-halo: rgba(63, 184, 159, 0.28);
  --grid-line: rgba(241, 239, 228, 0.1);
  --grid-line-strong: rgba(241, 239, 228, 0.18);
  --guide-line: rgba(63, 184, 159, 0.5);
  --viz-1: #2eaf96;
  --viz-2: #3da4d2;
  --viz-3: #86a553;
  --viz-4: #9f89d7;
  --viz-5: #c88943;
  --viz-6: #d0799a;
  --viz-7: #0cacbb;
  --viz-8: #d67b72;
  --viz-series: ["#2eaf96","#3da4d2","#86a553","#9f89d7","#c88943","#d0799a","#0cacbb","#d67b72"];
  --overlay-hover: rgba(241, 239, 228, 0.08);
  --overlay-press: rgba(241, 239, 228, 0.14);
  --overlay-selected: rgba(63, 184, 159, 0.22);
  --overlay-selected-border: rgba(63, 184, 159, 0.65);
  --scrim: rgba(0, 0, 0, 0.62);
  --backdrop-blur: 12px;
  --alpha-fg-4: rgba(241, 239, 228, 0.04);
  --alpha-fg-8: rgba(241, 239, 228, 0.08);
  --alpha-fg-12: rgba(241, 239, 228, 0.12);
  --alpha-fg-16: rgba(241, 239, 228, 0.16);
  --alpha-fg-24: rgba(241, 239, 228, 0.24);
  --alpha-fg-40: rgba(241, 239, 228, 0.4);
  --alpha-fg-64: rgba(241, 239, 228, 0.64);
  --alpha-primary-8: rgba(63, 184, 159, 0.08);
  --alpha-primary-16: rgba(63, 184, 159, 0.16);
  --alpha-primary-24: rgba(63, 184, 159, 0.24);
  --alpha-primary-40: rgba(63, 184, 159, 0.4);
  --alpha-primary-64: rgba(63, 184, 159, 0.64);
  --shadow-sm: 0px 1px 4px -2px rgba(0, 0, 0, 0.50);
  --shadow-md: 0px 8px 28px -6px rgba(0, 0, 0, 0.60);
}