/* North theme for Tailwind CSS v4 — generated from tokens/north.tokens.json. Do not edit by hand.
 * Usage (in your main CSS):
 *   @import "tailwindcss";
 *   @import "./north-tokens.css";        CSS variables, light + dark semantic roles
 *   @import "./north-tailwind.css";      this file
 * Then: bg-n-canvas text-n-heading bg-n-action text-n-on-action rounded-lg shadow-2 text-heading-1 font-display h-control-md
 * The default Tailwind palette is removed so only brand colours exist.
 */

@custom-variant dark {
  @media (prefers-color-scheme: dark) { &:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *) { @slot; } }
  &:where([data-theme="dark"], [data-theme="dark"] *) { @slot; }
}

@theme {
  --color-*: initial;
  --color-midnight-10: #E4E7F0;
  --color-midnight-20: #C8CDE0;
  --color-midnight-30: #A3AAC6;
  --color-midnight-40: #7C85A8;
  --color-midnight-50: #58628A;
  --color-midnight-60: #3D4870;
  --color-midnight-70: #2F3A63;
  --color-midnight-80: #273156;
  --color-midnight-90: #1B223D;
  --color-midnight-95: #121624;
  --color-midnight-05: #F3F4F8;
  --color-dune-10: #FAF2E8;
  --color-dune-20: #F0E5D7;
  --color-dune-30: #E2D3C1;
  --color-dune-40: #C9B9A6;
  --color-dune-60: #8E8274;
  --color-dune-80: #5C574F;
  --color-dune-90: #2E2B27;
  --color-dune-95: #1A1816;
  --color-dune-02: #FFFCF9;
  --color-dune-05: #FFF9F3;
  --color-dawn-10: #FFEDE2;
  --color-dawn-20: #FFE3D3;
  --color-dawn-30: #FFCDB2;
  --color-dawn-40: #FDB48D;
  --color-dawn-60: #F08A5D;
  --color-dawn-80: #B4532D;
  --color-dawn-05: #FFF6F0;
  --color-oasis-10: #DDF9FA;
  --color-oasis-20: #C0F4F7;
  --color-oasis-30: #95ECF1;
  --color-oasis-50: #4ECAE6;
  --color-oasis-70: #1A98B3;
  --color-oasis-85: #0E6476;
  --color-oasis-05: #F0FDFD;
  --color-gulf-10: #E2EFFA;
  --color-gulf-20: #C3DDF4;
  --color-gulf-30: #9FC9EE;
  --color-gulf-40: #6AAAE4;
  --color-gulf-60: #227ED1;
  --color-gulf-70: #1B6AB1;
  --color-gulf-80: #165792;
  --color-gulf-90: #0F3D68;
  --color-gulf-05: #F1F7FD;
  --color-steel-10: #ECEEF2;
  --color-steel-20: #DADEE6;
  --color-steel-30: #C1C7D2;
  --color-steel-50: #8A92A3;
  --color-steel-70: #545C6E;
  --color-steel-90: #22262F;
  --color-steel-05: #F6F7F9;
  --color-snow: #FCFCFC;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-status-success: #18794E;
  --color-status-success-bg: #E3F5EC;
  --color-status-warning: #9A5B00;
  --color-status-warning-bg: #FFF1D6;
  --color-status-danger: #C0352F;
  --color-status-danger-bg: #FDE7E6;
  --color-status-info: #1B6AB1;
  --color-status-info-bg: #E2EFFA;

  --font-sans: "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Helvetica Now Text", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-display-xl: 96px;
  --text-display-xl--line-height: 0.96;
  --text-display-xl--letter-spacing: -0.035em;
  --text-display-xl--font-weight: 700;
  --text-display-lg: 72px;
  --text-display-lg--line-height: 1;
  --text-display-lg--letter-spacing: -0.03em;
  --text-display-lg--font-weight: 700;
  --text-heading-1: 48px;
  --text-heading-1--line-height: 1.06;
  --text-heading-1--letter-spacing: -0.02em;
  --text-heading-1--font-weight: 500;
  --text-heading-2: 36px;
  --text-heading-2--line-height: 1.1;
  --text-heading-2--letter-spacing: -0.015em;
  --text-heading-2--font-weight: 500;
  --text-heading-3: 24px;
  --text-heading-3--line-height: 1.22;
  --text-heading-3--letter-spacing: -0.01em;
  --text-heading-3--font-weight: 500;
  --text-heading-4: 18px;
  --text-heading-4--line-height: 1.33;
  --text-heading-4--letter-spacing: 0;
  --text-heading-4--font-weight: 700;
  --text-lead: 22px;
  --text-lead--line-height: 1.45;
  --text-lead--letter-spacing: -0.005em;
  --text-lead--font-weight: 300;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.55;
  --text-body-lg--letter-spacing: 0;
  --text-body-lg--font-weight: 400;
  --text-body: 16px;
  --text-body--line-height: 1.55;
  --text-body--letter-spacing: 0;
  --text-body--font-weight: 400;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--letter-spacing: 0.005em;
  --text-body-sm--font-weight: 400;
  --text-caption: 12px;
  --text-caption--line-height: 1.4;
  --text-caption--letter-spacing: 0.01em;
  --text-caption--font-weight: 500;
  --text-microtitle: 12px;
  --text-microtitle--line-height: 1.3;
  --text-microtitle--letter-spacing: 0.1em;
  --text-microtitle--font-weight: 700;
  --text-code: 14px;
  --text-code--line-height: 1.6;
  --text-code--letter-spacing: 0;
  --text-code--font-weight: 400;

  --spacing: 4px;
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27,34,61,.06), 0 1px 1px rgba(27,34,61,.04);
  --shadow-2: 0 4px 12px rgba(27,34,61,.08), 0 1px 3px rgba(27,34,61,.06);
  --shadow-3: 0 12px 32px rgba(27,34,61,.12), 0 2px 6px rgba(27,34,61,.06);
  --shadow-4: 0 24px 64px rgba(27,34,61,.18), 0 4px 12px rgba(27,34,61,.08);
  --shadow-glow: 0 0 0 1px rgba(149,236,241,.4), 0 0 32px rgba(149,236,241,.35);
  --breakpoint-sm: 640px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1600px;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1);
  --blur-scrim: 4px;
  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 40px;
  --container-content: 1280px;
  --animate-shimmer: n-shimmer 1.6s cubic-bezier(0.2, 0, 0, 1) infinite;
  --animate-dot: n-dot 1.2s cubic-bezier(0.2, 0, 0, 1) infinite;
  --animate-glow: n-glow 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
  --animate-rise: n-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --animate-indeterminate: n-indeterminate 1.4s cubic-bezier(0.2, 0, 0, 1) infinite;
  --animate-skel-pulse: n-skel-pulse 1.6s ease-in-out infinite;
  @keyframes n-shimmer { to { transform: translateX(100%); } }
  @keyframes n-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } }
  @keyframes n-glow { 50% { box-shadow: 0 0 0 1px rgba(149,236,241,.4), 0 0 40px rgba(149,236,241,.6); } }
  @keyframes n-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes n-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
  @keyframes n-skel-pulse { 50% { opacity: 0.55; } }
}

/* Semantic colours: utilities follow light/dark through the north-tokens.css variables. */
@theme inline {
  --color-n-canvas: var(--n-bg-canvas);
  --color-n-subtle: var(--n-bg-subtle);
  --color-n-panel: var(--n-bg-panel);
  --color-n-inverse: var(--n-bg-inverse);
  --color-n-surface-raised: var(--n-surface-raised);
  --color-n-heading: var(--n-text-heading);
  --color-n-body: var(--n-text-body);
  --color-n-caption: var(--n-text-caption);
  --color-n-strong: var(--n-text-strong);
  --color-n-link: var(--n-text-link);
  --color-n-on-action: var(--n-text-on-action);
  --color-n-action: var(--n-action);
  --color-n-action-hover: var(--n-action-hover);
  --color-n-accent: var(--n-accent);
  --color-n-border: var(--n-border);
  --color-n-border-ui: var(--n-border-ui);
  --color-n-focus: var(--n-focus);
  --color-n-diagram-canvas: var(--n-diagram-canvas);
  --color-n-diagram-line: var(--n-diagram-line);
  --color-n-diagram-line-strong: var(--n-diagram-line-strong);
  --color-n-diagram-node: var(--n-diagram-node);
  --color-n-diagram-node-alt: var(--n-diagram-node-alt);
  --color-n-diagram-group: var(--n-diagram-group);
  --color-n-diagram-zone: var(--n-diagram-zone);
  --color-n-diagram-zone-border: var(--n-diagram-zone-border);
  --color-n-diagram-ai: var(--n-diagram-ai);
  --color-n-diagram-human: var(--n-diagram-human);
  --color-n-diagram-flow: var(--n-diagram-flow);
  --color-n-diagram-label: var(--n-diagram-label);
  --color-n-diagram-caption: var(--n-diagram-caption);
  --color-n-skeleton-base: var(--n-skeleton-base);
  --color-n-skeleton-shine: var(--n-skeleton-shine);
  --color-n-scrim: var(--n-scrim);
  --color-n-row-hover: var(--n-row-hover);
  --color-n-row-selected: var(--n-row-selected);
  --color-n-table-header: var(--n-table-header);
  --color-n-status-success: var(--n-status-success);
  --color-n-status-success-bg: var(--n-status-success-bg);
  --color-n-status-warning: var(--n-status-warning);
  --color-n-status-warning-bg: var(--n-status-warning-bg);
  --color-n-status-danger: var(--n-status-danger);
  --color-n-status-danger-bg: var(--n-status-danger-bg);
  --color-n-status-info: var(--n-status-info);
  --color-n-status-info-bg: var(--n-status-info-bg);
  --color-n-on-danger: var(--n-text-on-danger);
  --color-n-ai: var(--n-ai);
}

@utility h-control-sm { height: 32px; }
@utility h-control-md { height: 40px; }
@utility h-control-lg { height: 48px; }
@utility min-h-touch { min-height: 44px; }
@utility min-w-touch { min-width: 44px; }
@utility max-w-measure { max-width: 68ch; }
@utility opacity-disabled { opacity: 0.4; }
@utility opacity-muted { opacity: 0.64; }
@utility duration-instant { transition-duration: 80ms; }
@utility duration-fast { transition-duration: 140ms; }
@utility duration-base { transition-duration: 220ms; }
@utility duration-slow { transition-duration: 360ms; }
@utility duration-deliberate { transition-duration: 600ms; }
@utility z-base { z-index: 0; }
@utility z-raised { z-index: 10; }
@utility z-sticky { z-index: 100; }
@utility z-overlay { z-index: 1000; }
@utility z-modal { z-index: 1100; }
@utility z-toast { z-index: 1200; }
@utility bg-aurora { background-image: var(--n-gradient-aurora); }
@utility bg-horizon { background-image: var(--n-gradient-horizon); }
@utility bg-night { background-image: var(--n-gradient-night); }