/* Generated by @okrado/brand 0.6.0 (npm run build). Do not edit: change tokens/ or brand.yaml. */
/* Okrado product UI. Light + comfortable on :root; data-mode="light|dark|system" and data-density="comfortable|compact" on <html> or any subtree. */

:root {
  --okr-ui-space-0: 0px;
  --okr-ui-space-1: 4px;
  --okr-ui-space-2: 8px;
  --okr-ui-space-3: 12px;
  --okr-ui-space-4: 16px;
  --okr-ui-space-5: 20px;
  --okr-ui-space-6: 24px;
  --okr-ui-space-8: 32px;
  --okr-ui-space-10: 40px;
  --okr-ui-space-12: 48px;
  --okr-ui-space-16: 64px;
  --okr-ui-space-20: 80px;
  --okr-ui-space-24: 96px;
  --okr-ui-space-32: 128px;
  --okr-ui-space-42: 168px;
  --okr-ui-space-0-5: 2px;
  --okr-ui-space-section: clamp(96px, 5rem + 5vw, 168px);
  --okr-ui-space-hero-top: clamp(40px, 2rem + 4vw, 104px);
  --okr-ui-radius-xs: 4px;
  --okr-ui-radius-sm: 6px;
  --okr-ui-radius-md: 8px;
  --okr-ui-radius-lg: 10px;
  --okr-ui-radius-xl: 14px;
  --okr-ui-radius-2xl: 16px;
  --okr-ui-radius-full: 9999px;
  --okr-ui-font-family-display: 'Archivo Variable', Archivo, 'Archivo Black', system-ui, sans-serif;
  --okr-ui-font-family-body: 'Inter Variable', Inter, system-ui, sans-serif;
  --okr-ui-font-family-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --okr-ui-font-family-arabic: 'Readex Pro Variable', 'Readex Pro', system-ui, sans-serif;
  --okr-ui-font-size-xs: 12px;
  --okr-ui-font-size-sm: 13px;
  --okr-ui-font-size-md: 14px;
  --okr-ui-font-size-lg: 16px;
  --okr-ui-font-size-xl: 20px;
  --okr-ui-font-size-2xl: 24px;
  --okr-ui-font-size-3xl: 32px;
  --okr-ui-font-fluid-base: clamp(1.000rem, 0.979rem + 0.093vw, 1.062rem);
  --okr-ui-font-fluid-md: clamp(1.200rem, 1.157rem + 0.190vw, 1.328rem);
  --okr-ui-font-fluid-lg: clamp(1.440rem, 1.367rem + 0.326vw, 1.660rem);
  --okr-ui-font-fluid-xl: clamp(1.728rem, 1.612rem + 0.514vw, 2.075rem);
  --okr-ui-font-fluid-2xl: clamp(2.074rem, 1.900rem + 0.771vw, 2.594rem);
  --okr-ui-font-fluid-3xl: clamp(2.488rem, 2.237rem + 1.117vw, 3.242rem);
  --okr-ui-font-fluid-4xl: clamp(2.986rem, 2.630rem + 1.581vw, 4.053rem);
  --okr-ui-font-marketing-size-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --okr-ui-font-marketing-size-h2: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --okr-ui-font-marketing-size-h3: 1.375rem;
  --okr-ui-font-marketing-size-h4: 1.125rem;
  --okr-ui-font-marketing-size-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --okr-ui-font-marketing-size-body: 1rem;
  --okr-ui-font-marketing-size-small: 0.875rem;
  --okr-ui-font-marketing-size-caption: 0.8125rem;
  --okr-ui-font-marketing-size-mono: 0.8125rem;
  --okr-ui-font-marketing-line-height-display: 1;
  --okr-ui-font-marketing-line-height-h2: 1.04;
  --okr-ui-font-marketing-line-height-h3: 1.2;
  --okr-ui-font-marketing-line-height-h4: 1.3;
  --okr-ui-font-marketing-line-height-lead: 1.6;
  --okr-ui-font-marketing-line-height-body: 1.6;
  --okr-ui-font-marketing-line-height-small: 1.55;
  --okr-ui-font-marketing-line-height-caption: 1.45;
  --okr-ui-font-marketing-line-height-mono: 1.6;
  --okr-ui-font-marketing-tracking-display: -0.04em;
  --okr-ui-font-marketing-tracking-h2: -0.035em;
  --okr-ui-font-marketing-tracking-h3: -0.02em;
  --okr-ui-font-marketing-tracking-h4: -0.015em;
  --okr-ui-font-marketing-tracking-lead: 0em;
  --okr-ui-font-marketing-tracking-body: 0em;
  --okr-ui-font-marketing-tracking-small: 0em;
  --okr-ui-font-marketing-tracking-caption: 0em;
  --okr-ui-font-marketing-tracking-mono: 0em;
  --okr-ui-font-weight-regular: 400;
  --okr-ui-font-weight-medium: 500;
  --okr-ui-font-weight-semibold: 600;
  --okr-ui-font-weight-bold: 700;
  --okr-ui-font-weight-display: 540;
  --okr-ui-font-width-display: 108;
  --okr-ui-font-width-heading: 104;
  --okr-ui-font-line-height-text: 1.45;
  --okr-ui-font-line-height-heading: 1.2;
  --okr-ui-font-tracking-display: -0.04em;
  --okr-ui-font-tracking-normal: 0em;
  --okr-ui-focus-width: 2px;
  --okr-ui-focus-offset: 3px;
  --okr-ui-hit-min: 24px;
  --okr-ui-row-height-2line: 56px;
  --okr-ui-z-sticky: 10;
  --okr-ui-z-sheet: 40;
  --okr-ui-z-dialog: 50;
  --okr-ui-z-popover: 60;
  --okr-ui-z-toast: 70;
  --okr-ui-z-tooltip: 80;
  --okr-ui-z-skip: 90;
  --okr-ui-layout-content-max: 1280px;
  --okr-ui-layout-gutter: 24px;
  --okr-ui-layout-columns: 12;
  --okr-ui-layout-margin: clamp(20px, 4.2vw, 80px);
  --okr-ui-layout-header: 68px;
  --okr-ui-layout-sidebar: 216px;
  --okr-ui-layout-inspector: 340px;
  --okr-ui-layout-topbar: 48px;
  --okr-ui-layout-icon-rail: 48px;
  --okr-ui-layout-sidebar-min: 200px;
  --okr-ui-layout-sidebar-max: 320px;
  --okr-ui-layout-form-max: 640px;
  --okr-ui-layout-dashboard-max: 1440px;
  --okr-ui-layout-page-inline-sm: 16px;
  --okr-ui-layout-page-inline: 24px;
  --okr-ui-layout-page-top: 24px;
  --okr-ui-layout-section-gap: 32px;
  --okr-ui-layout-reading-max: 68ch;
  --okr-ui-layout-header-toolbar-gap: 12px;
  --okr-ui-layout-dialog-sm: 440px;
  --okr-ui-layout-dialog-md: 560px;
  --okr-ui-layout-dialog-lg: 720px;
  --okr-ui-layout-drawer-sm: 340px;
  --okr-ui-layout-drawer-md: 480px;
  --okr-ui-layout-drawer-lg: 640px;
  --okr-ui-layout-sheet-snap-half: 0.5;
  --okr-ui-layout-sheet-snap-full: 0.9;
  --okr-ui-motion-duration-instant: 0ms;
  --okr-ui-motion-duration-micro: 120ms;
  --okr-ui-motion-duration-standard: 200ms;
  --okr-ui-motion-duration-panel: 320ms;
  --okr-ui-motion-duration-write: 500ms;
  --okr-ui-motion-duration-loop: 1600ms;
  --okr-ui-motion-duration-fast: 120ms;
  --okr-ui-motion-duration-base: 200ms;
  --okr-ui-motion-duration-slow: 320ms;
  --okr-ui-motion-duration-micro-exit: 96ms;
  --okr-ui-motion-duration-standard-exit: 160ms;
  --okr-ui-motion-duration-panel-exit: 256ms;
  --okr-ui-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --okr-ui-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --okr-ui-motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --okr-ui-motion-ease-linear: cubic-bezier(0, 0, 1, 1);
  --okr-ui-motion-ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --okr-ui-motion-shift-sm: 8px;
  --okr-ui-motion-shift-md: 16px;
  --okr-ui-motion-exit-ratio: 0.8;
}

:root,
[data-density="comfortable"] {
  --okr-ui-row-height: 40px;
  --okr-ui-control-height: 36px;
  --okr-ui-control-padding-x: 12px;
  --okr-ui-control-gap: 8px;
  --okr-ui-nav-item: 32px;
  --okr-ui-inset-card: 16px;
}

[data-density="compact"] {
  --okr-ui-row-height: 32px;
  --okr-ui-control-height: 28px;
  --okr-ui-control-padding-x: 8px;
  --okr-ui-control-gap: 4px;
  --okr-ui-nav-item: 28px;
  --okr-ui-inset-card: 12px;
}

:root,
[data-mode="light"] {
  color-scheme: light;
  --okr-ui-focus-ring: #3769e0;
  --okr-ui-bg-canvas: #faf8f3;
  --okr-ui-bg-surface: #fefdfa;
  --okr-ui-bg-raised: #fefdfa;
  --okr-ui-bg-hover: #f3efe6;
  --okr-ui-bg-active: #ebe7de;
  --okr-ui-border-subtle: #e2ded6;
  --okr-ui-border-default: #d8d4cc;
  --okr-ui-border-strong: #b4b1a9;
  --okr-ui-border-control: #7c8088;
  --okr-ui-text-primary: #161a22;
  --okr-ui-text-secondary: #52575f;
  --okr-ui-text-tertiary: #63676e;
  --okr-ui-text-inverse: #fefdfa;
  --okr-ui-primary-solid: #161a22;
  --okr-ui-primary-hover: #52575f;
  --okr-ui-primary-on: #fefdfa;
  --okr-ui-accent-solid: #f6b048;
  --okr-ui-accent-hover: #e78d02;
  --okr-ui-accent-subtle: #fdeedb;
  --okr-ui-accent-border: #e8bb7f;
  --okr-ui-accent-text: #9c5906;
  --okr-ui-accent-on: #161a22;
  --okr-ui-record-solid: #c47500;
  --okr-ui-record-logo: #e48a00;
  --okr-ui-record-text: #9c5906;
  --okr-ui-record-subtle: #fdeedb;
  --okr-ui-link: #2f5bc2;
  --okr-ui-success-solid: #008451;
  --okr-ui-success-hover: #00784a;
  --okr-ui-success-subtle: #e0f7e9;
  --okr-ui-success-border: #8fd7ad;
  --okr-ui-success-text: #14764a;
  --okr-ui-success-on: #fefdfa;
  --okr-ui-warning-solid: #bb5300;
  --okr-ui-warning-hover: #ae4800;
  --okr-ui-warning-subtle: #ffece2;
  --okr-ui-warning-border: #fdaf88;
  --okr-ui-warning-text: #a84811;
  --okr-ui-warning-on: #fefdfa;
  --okr-ui-danger-solid: #d22632;
  --okr-ui-danger-hover: #c01c2b;
  --okr-ui-danger-subtle: #ffebe9;
  --okr-ui-danger-border: #ffaaa7;
  --okr-ui-danger-text: #be222d;
  --okr-ui-danger-on: #fefdfa;
  --okr-ui-info-solid: #3769e0;
  --okr-ui-info-hover: #2e5dd0;
  --okr-ui-info-subtle: #e8f1ff;
  --okr-ui-info-border: #a4c5ff;
  --okr-ui-info-text: #2f5bc2;
  --okr-ui-info-on: #fefdfa;
  --okr-ui-selection: #fce4c5;
  --okr-ui-scrim: rgba(13,16,21,0.4);
  --okr-ui-chart-1: #161a22;
  --okr-ui-chart-2: #4e82e5;
  --okr-ui-chart-3: #019f68;
  --okr-ui-chart-4: #966cd7;
  --okr-ui-chart-5: #00999f;
  --okr-ui-chart-6: #d35570;
  --okr-ui-chart-now: #c47500;
  --okr-ui-shadow-e1: 0px 1px 0px 0px rgba(13,16,21,0.04), 0px 12px 32px -12px rgba(13,16,21,0.14);
  --okr-ui-shadow-e2: 0px 4px 12px 0px rgba(13,16,21,0.08), 0px 1px 3px 0px rgba(13,16,21,0.06);
  --okr-ui-shadow-e3: 0px 12px 32px 0px rgba(13,16,21,0.12), 0px 2px 6px 0px rgba(13,16,21,0.06);
}

[data-mode="dark"] {
  color-scheme: dark;
  --okr-ui-focus-ring: #7aa7ff;
  --okr-ui-bg-canvas: #0d1015;
  --okr-ui-bg-surface: #161a22;
  --okr-ui-bg-raised: #1e232b;
  --okr-ui-bg-hover: #262b34;
  --okr-ui-bg-active: #2e343d;
  --okr-ui-border-subtle: #2e343d;
  --okr-ui-border-default: #383e47;
  --okr-ui-border-strong: #646973;
  --okr-ui-border-control: #86837b;
  --okr-ui-text-primary: #f3efe6;
  --okr-ui-text-secondary: #c1bdb4;
  --okr-ui-text-tertiary: #97938c;
  --okr-ui-text-inverse: #0d1015;
  --okr-ui-primary-solid: #f3efe6;
  --okr-ui-primary-hover: #c1bdb4;
  --okr-ui-primary-on: #0d1015;
  --okr-ui-accent-solid: #f6b048;
  --okr-ui-accent-hover: #fcc05c;
  --okr-ui-accent-subtle: #30200b;
  --okr-ui-accent-border: #6e4400;
  --okr-ui-accent-text: #fcd180;
  --okr-ui-accent-on: #0d1015;
  --okr-ui-record-solid: #f6b048;
  --okr-ui-record-logo: #f6b048;
  --okr-ui-record-text: #fcd180;
  --okr-ui-record-subtle: #30200b;
  --okr-ui-link: #7aa7ff;
  --okr-ui-success-solid: #2fcf8d;
  --okr-ui-success-hover: #47dc9d;
  --okr-ui-success-subtle: #0f2a1c;
  --okr-ui-success-border: #085d3c;
  --okr-ui-success-text: #5ee6a8;
  --okr-ui-success-on: #0d1015;
  --okr-ui-warning-solid: #f77f20;
  --okr-ui-warning-hover: #ff9645;
  --okr-ui-warning-subtle: #361c0d;
  --okr-ui-warning-border: #7a3a0b;
  --okr-ui-warning-text: #fca864;
  --okr-ui-warning-on: #0d1015;
  --okr-ui-danger-solid: #f1424e;
  --okr-ui-danger-hover: #ff4d5e;
  --okr-ui-danger-subtle: #3a1717;
  --okr-ui-danger-border: #852b2e;
  --okr-ui-danger-text: #ff898b;
  --okr-ui-danger-on: #0d1015;
  --okr-ui-info-solid: #6294fa;
  --okr-ui-info-hover: #71a0ff;
  --okr-ui-info-subtle: #17233a;
  --okr-ui-info-border: #2d4c87;
  --okr-ui-info-text: #7aa7ff;
  --okr-ui-info-on: #0d1015;
  --okr-ui-selection: #4a2d02;
  --okr-ui-scrim: rgba(13,16,21,0.64);
  --okr-ui-chart-1: #f3efe6;
  --okr-ui-chart-2: #86b1ff;
  --okr-ui-chart-3: #4fcc92;
  --okr-ui-chart-4: #c09aff;
  --okr-ui-chart-5: #46c6cd;
  --okr-ui-chart-6: #ff869c;
  --okr-ui-chart-now: #f6b048;
  --okr-ui-shadow-e1: 0px 0px 0px 0px rgba(0,0,0,0);
  --okr-ui-shadow-e2: 0px 24px 48px -16px rgba(0,0,0,0.6);
  --okr-ui-shadow-e3: 0px 24px 48px -16px rgba(0,0,0,0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --okr-ui-focus-ring: #7aa7ff;
    --okr-ui-bg-canvas: #0d1015;
    --okr-ui-bg-surface: #161a22;
    --okr-ui-bg-raised: #1e232b;
    --okr-ui-bg-hover: #262b34;
    --okr-ui-bg-active: #2e343d;
    --okr-ui-border-subtle: #2e343d;
    --okr-ui-border-default: #383e47;
    --okr-ui-border-strong: #646973;
    --okr-ui-border-control: #86837b;
    --okr-ui-text-primary: #f3efe6;
    --okr-ui-text-secondary: #c1bdb4;
    --okr-ui-text-tertiary: #97938c;
    --okr-ui-text-inverse: #0d1015;
    --okr-ui-primary-solid: #f3efe6;
    --okr-ui-primary-hover: #c1bdb4;
    --okr-ui-primary-on: #0d1015;
    --okr-ui-accent-solid: #f6b048;
    --okr-ui-accent-hover: #fcc05c;
    --okr-ui-accent-subtle: #30200b;
    --okr-ui-accent-border: #6e4400;
    --okr-ui-accent-text: #fcd180;
    --okr-ui-accent-on: #0d1015;
    --okr-ui-record-solid: #f6b048;
    --okr-ui-record-logo: #f6b048;
    --okr-ui-record-text: #fcd180;
    --okr-ui-record-subtle: #30200b;
    --okr-ui-link: #7aa7ff;
    --okr-ui-success-solid: #2fcf8d;
    --okr-ui-success-hover: #47dc9d;
    --okr-ui-success-subtle: #0f2a1c;
    --okr-ui-success-border: #085d3c;
    --okr-ui-success-text: #5ee6a8;
    --okr-ui-success-on: #0d1015;
    --okr-ui-warning-solid: #f77f20;
    --okr-ui-warning-hover: #ff9645;
    --okr-ui-warning-subtle: #361c0d;
    --okr-ui-warning-border: #7a3a0b;
    --okr-ui-warning-text: #fca864;
    --okr-ui-warning-on: #0d1015;
    --okr-ui-danger-solid: #f1424e;
    --okr-ui-danger-hover: #ff4d5e;
    --okr-ui-danger-subtle: #3a1717;
    --okr-ui-danger-border: #852b2e;
    --okr-ui-danger-text: #ff898b;
    --okr-ui-danger-on: #0d1015;
    --okr-ui-info-solid: #6294fa;
    --okr-ui-info-hover: #71a0ff;
    --okr-ui-info-subtle: #17233a;
    --okr-ui-info-border: #2d4c87;
    --okr-ui-info-text: #7aa7ff;
    --okr-ui-info-on: #0d1015;
    --okr-ui-selection: #4a2d02;
    --okr-ui-scrim: rgba(13,16,21,0.64);
    --okr-ui-chart-1: #f3efe6;
    --okr-ui-chart-2: #86b1ff;
    --okr-ui-chart-3: #4fcc92;
    --okr-ui-chart-4: #c09aff;
    --okr-ui-chart-5: #46c6cd;
    --okr-ui-chart-6: #ff869c;
    --okr-ui-chart-now: #f6b048;
    --okr-ui-shadow-e1: 0px 0px 0px 0px rgba(0,0,0,0);
    --okr-ui-shadow-e2: 0px 24px 48px -16px rgba(0,0,0,0.6);
    --okr-ui-shadow-e3: 0px 24px 48px -16px rgba(0,0,0,0.6);
  }
}

@media (pointer: coarse) {
  :root {
    --okr-ui-hit-min: 44px;
    --okr-ui-nav-item: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --okr-ui-motion-duration-instant: 0ms;
    --okr-ui-motion-duration-micro: 0ms;
    --okr-ui-motion-duration-standard: 200ms;
    --okr-ui-motion-duration-panel: 200ms;
    --okr-ui-motion-duration-write: 0ms;
    --okr-ui-motion-duration-loop: 0ms;
    --okr-ui-motion-duration-fast: 0ms;
    --okr-ui-motion-duration-base: 200ms;
    --okr-ui-motion-duration-slow: 200ms;
    --okr-ui-motion-duration-micro-exit: 0ms;
    --okr-ui-motion-duration-standard-exit: 160ms;
    --okr-ui-motion-duration-panel-exit: 160ms;
    --okr-ui-motion-ease-standard: cubic-bezier(0, 0, 1, 1);
    --okr-ui-motion-ease-enter: cubic-bezier(0, 0, 1, 1);
    --okr-ui-motion-ease-exit: cubic-bezier(0, 0, 1, 1);
    --okr-ui-motion-ease-linear: cubic-bezier(0, 0, 1, 1);
    --okr-ui-motion-ease-panel: cubic-bezier(0, 0, 1, 1);
    --okr-ui-motion-shift-sm: 0px;
    --okr-ui-motion-shift-md: 0px;
    --okr-ui-motion-exit-ratio: 0.8;
  }
}

/* ADR-0102: forced colours removes shadows and author colours. A shadow-only floating surface (a component sets
   data-elevation="e2|e3") gets a system-colour border; focus is an outline, never a box-shadow. */
@media (forced-colors: active) {
  [data-elevation="e2"],
  [data-elevation="e3"] {
    border: 1px solid CanvasText;
  }
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }
}

/* ADR-0102: more contrast raises line and muted text one step, in both modes. */
@media (prefers-contrast: more) {
  :root {
    --okr-ui-border-subtle: #d8d4cc;
    --okr-ui-border-default: #b4b1a9;
    --okr-ui-text-secondary: #161a22;
    --okr-ui-text-tertiary: #52575f;
  }

  [data-mode="dark"] {
    --okr-ui-border-subtle: #383e47;
    --okr-ui-border-default: #646973;
    --okr-ui-text-secondary: #f3efe6;
    --okr-ui-text-tertiary: #c1bdb4;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
      --okr-ui-border-subtle: #383e47;
      --okr-ui-border-default: #646973;
      --okr-ui-text-secondary: #f3efe6;
      --okr-ui-text-tertiary: #c1bdb4;
    }
  }
}