/* Generated from docs/design/tokens/ by eleventy.config.js: do not edit. */

/**
 * Spacing tokens
 * Adapted from Carbon Design System spacing scale (Apache 2.0)
 * https://carbondesignsystem.com/elements/spacing/overview/
 */

:root {
  --spacing-01: 0.125rem; /* 2px */
  --spacing-02: 0.25rem;  /* 4px */
  --spacing-03: 0.5rem;   /* 8px: 1 mini unit */
  --spacing-04: 0.75rem;  /* 12px */
  --spacing-05: 1rem;     /* 16px: 2 mini units */
  --spacing-06: 1.5rem;   /* 24px */
  --spacing-07: 2rem;     /* 32px: 4 mini units */
  --spacing-08: 2.5rem;   /* 40px */
  --spacing-09: 3rem;     /* 48px */
  --spacing-10: 4rem;     /* 64px */
  --spacing-11: 5rem;     /* 80px */
  --spacing-12: 6rem;     /* 96px */
  --spacing-13: 10rem;    /* 160px */
}

/**
 * Grid and layout tokens
 * Adapted from Carbon 2× Grid (Apache 2.0)
 * https://carbondesignsystem.com/elements/2x-grid/overview/
 */

:root {
  /* Mini unit */
  --grid-mini-unit: 0.5rem; /* 8px */

  /* Breakpoints */
  --breakpoint-sm: 20rem;   /* 320px */
  --breakpoint-md: 42rem;   /* 672px */
  --breakpoint-lg: 66rem;   /* 1056px */
  --breakpoint-xl: 82rem;   /* 1312px */
  --breakpoint-max: 99rem;  /* 1584px */

  /* Column counts per breakpoint */
  --grid-columns-sm: 4;
  --grid-columns-md: 8;
  --grid-columns-lg: 16;

  /* Standard padding and gutter */
  --grid-padding: var(--spacing-05); /* 16px */
  --grid-gutter: var(--spacing-07);  /* 32px */

  /* Margins at viewport edge */
  --grid-margin-sm: 0;
  --grid-margin-md: var(--spacing-05);
  --grid-margin-lg: var(--spacing-05);
  --grid-margin-max: var(--spacing-06);

  /* Content max-width (mini-unit aligned: 136 × 8 = 1088px) */
  --content-max-width: 68rem;

  /* Fixed sizing scale */
  --size-1x: calc(var(--grid-mini-unit) * 1);  /* 8px */
  --size-2x: calc(var(--grid-mini-unit) * 2);  /* 16px */
  --size-3x: calc(var(--grid-mini-unit) * 3);  /* 24px */
  --size-4x: calc(var(--grid-mini-unit) * 4);  /* 32px */
  --size-6x: calc(var(--grid-mini-unit) * 6);  /* 48px */
  --size-8x: calc(var(--grid-mini-unit) * 8);  /* 64px */
  --size-10x: calc(var(--grid-mini-unit) * 10); /* 80px */

  /* Persistent site chrome */
  --scrollbar-width: var(--size-1x);
  --scrollbar-min-thumb-size: var(--size-4x);
  --z-index-scrollbar: 10;
  --z-index-site-header: 20;
}

/**
 * Border and radius tokens
 *
 * Carbon uses square corners by default; we allow one small mini-unit-aligned
 * radius for interactive surfaces so the system has a single documented answer
 * instead of ad-hoc values.
 */

:root {
  --border-width: 1px;
  --border-width-focus: 2px; /* 2px focus ring: see 08: Accessibility */

  --radius-none: 0;
  --radius-sm: var(--spacing-02); /* 4px: mini-unit aligned */
}

/**
 * Typography tokens
 *
 * Font families: IBM Plex Sans (sans/display), JetBrains Mono (mono)
 * Scale adapted from Carbon type system (Apache 2.0)
 * https://carbondesignsystem.com/elements/typography/overview/
 */

:root {
  --font-family-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: var(--font-family-sans);
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Type scale (rem at 16px root) */
  --type-scale-01: 0.75rem;    /* 12px */
  --type-scale-02: 0.875rem;   /* 14px */
  --type-scale-03: 1rem;       /* 16px */
  --type-scale-04: 1.125rem;   /* 18px */
  --type-scale-05: 1.25rem;    /* 20px */
  --type-scale-06: 1.5rem;     /* 24px */
  --type-scale-07: 1.75rem;    /* 28px */
  --type-scale-08: 2rem;       /* 32px */
  --type-scale-09: 2.25rem;    /* 36px */
  --type-scale-10: 2.625rem;   /* 42px */
  --type-scale-11: 3rem;       /* 48px */
  --type-scale-12: 3.375rem;   /* 54px */
  --type-scale-13: 3.75rem;    /* 60px */

  /* Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --line-height-compact: 1.375;

  /* Composite type tokens: productive set */
  --type-body-01: var(--font-weight-regular) var(--type-scale-03) / var(--line-height-body) var(--font-family-sans);
  --type-body-compact-01: var(--font-weight-regular) var(--type-scale-02) / var(--line-height-compact) var(--font-family-sans);
  --type-label-01: var(--font-weight-regular) var(--type-scale-01) / var(--line-height-compact) var(--font-family-sans);
  --type-heading-01: var(--font-weight-semibold) var(--type-scale-06) / var(--line-height-heading) var(--font-family-display);
  --type-heading-02: var(--font-weight-semibold) var(--type-scale-07) / var(--line-height-heading) var(--font-family-display);
  --type-heading-03: var(--font-weight-semibold) var(--type-scale-08) / var(--line-height-tight) var(--font-family-display);

  /* Expressive set (marketing) */
  --type-heading-expressive-01: var(--font-weight-light) var(--type-scale-10) / var(--line-height-tight) var(--font-family-display);
  --type-heading-expressive-02: var(--font-weight-light) var(--type-scale-11) / var(--line-height-tight) var(--font-family-display);

  /* Measure (line length) */
  --measure-prose: 65ch;      /* Running copy: readability optimum */
  --measure-display: 42rem;   /* Expressive/marketing zones: ~10 of 16 columns */
}

/**
 * Color tokens
 *
 * Architecture adapted from Carbon color system (Apache 2.0)
 * https://carbondesignsystem.com/elements/color/overview/
 */

:root {
  /* Neutral scale */
  --neutral-100: #0a0a0a;
  --neutral-90: #1a1a1a;
  --neutral-80: #333333;
  --neutral-70: #4d4d4d;
  --neutral-60: #666666;
  --neutral-50: #808080;
  --neutral-40: #999999;
  --neutral-30: #b3b3b3;
  --neutral-20: #d9d9d9;
  --neutral-10: #f0f0f0;
  --neutral-00: #ffffff;

  /* Lean Influence brand scale */
  --brand-cream-00: #fffdfb;
  --brand-cream-10: #fff7f2;
  --brand-peach-20: #faebe5;
  --brand-peach-30: #f2d9d2;
  --brand-peach-40: #e5c7c1;
  --brand-terracotta-50: #bd7369;
  --brand-terracotta-60: #a9473d;
  --brand-terracotta-70: #89372f;
  --brand-terracotta-80: #672822;

  /* Warm neutrals keep text legible without turning the palette brown */
  --warm-neutral-90: #2d2726;
  --warm-neutral-60: #665b59;
  --warm-neutral-50: #827572;
  --warm-neutral-40: #aca09d;

  /* Semantic tokens: rosy terracotta light theme */
  --background: var(--brand-cream-10);
  --background-hover: var(--brand-peach-20);
  --background-active: var(--brand-peach-30);

  --layer-01: var(--brand-peach-20);
  --layer-02: var(--brand-cream-00);
  --layer-03: #f6e2dc;
  --layer-hover: var(--brand-peach-30);

  --field: var(--brand-peach-20);
  --field-hover: var(--brand-peach-30);

  --border-subtle: var(--brand-peach-40);
  --border-strong: #817371;

  --text-primary: var(--warm-neutral-90);
  --text-secondary: var(--warm-neutral-60);
  --text-placeholder: var(--warm-neutral-50);
  --text-disabled: var(--warm-neutral-40);
  --text-on-color: var(--neutral-00);

  --interactive: var(--brand-terracotta-60);
  --interactive-hover: var(--brand-terracotta-70);
  --interactive-active: var(--brand-terracotta-80);

  --link: #973b32;
  --link-hover: #712b25;

  --icon-primary: var(--warm-neutral-90);
  --icon-secondary: var(--warm-neutral-60);
  --icon-on-color: var(--neutral-00);
  --brand-mark: var(--brand-terracotta-60);

  --focus: var(--brand-terracotta-60);
  --focus-inset: var(--neutral-00);

  --support-error: #c42b2b;
  --support-warning: #c47a00;
  --support-success: #1a7a3a;
  --support-info: var(--neutral-60);

  --overlay: rgba(10, 10, 10, 0.5);

  /* Chart: categorical (apply in sequence) */
  --chart-categorical-01: #2d3748;
  --chart-categorical-02: #2b6cb0;
  --chart-categorical-03: #2c7a7b;
  --chart-categorical-04: #975a16;
  --chart-categorical-05: #9b2c2c;
  --chart-categorical-06: #553c9a;
  --chart-categorical-07: #276749;
  --chart-categorical-08: #c05621;

  /* Chart: sequential (darkest = largest on light backgrounds) */
  --chart-sequential-01: var(--neutral-10);
  --chart-sequential-02: var(--neutral-20);
  --chart-sequential-03: var(--neutral-30);
  --chart-sequential-04: var(--neutral-50);
  --chart-sequential-05: var(--neutral-60);
  --chart-sequential-06: var(--neutral-70);
  --chart-sequential-07: var(--neutral-80);
  --chart-sequential-08: var(--neutral-90);
}

/* Dark theme: post-launch; not enabled at launch */
@media (prefers-color-scheme: dark) {
  :root.auto-theme {
    --background: var(--neutral-100);
    --background-hover: var(--neutral-90);
    --layer-01: var(--neutral-90);
    --layer-02: var(--neutral-80);
    --text-primary: var(--neutral-00);
    --text-secondary: var(--neutral-30);
    --border-subtle: var(--neutral-80);
    --interactive: var(--neutral-00);
    --focus: var(--neutral-00);
  }
}

/**
 * Motion tokens
 * Easing curves adapted from Carbon Design System (Apache 2.0)
 * https://carbondesignsystem.com/elements/motion/overview/
 */

:root {
  /* Productive easing */
  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance-productive: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit-productive: cubic-bezier(0.2, 0, 1, 0.9);

  /* Expressive easing */
  --ease-standard-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance-expressive: cubic-bezier(0, 0, 0.3, 1);
  --ease-exit-expressive: cubic-bezier(0.4, 0.14, 1, 1);

  /* Default to productive */
  --ease-standard: var(--ease-standard-productive);
  --ease-entrance: var(--ease-entrance-productive);
  --ease-exit: var(--ease-exit-productive);

  /* Duration */
  --duration-fast-01: 70ms;
  --duration-fast-02: 110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01: 400ms;
  --duration-slow-02: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast-01: 0ms;
    --duration-fast-02: 0ms;
    --duration-moderate-01: 0ms;
    --duration-moderate-02: 0ms;
    --duration-slow-01: 0ms;
    --duration-slow-02: 0ms;
  }
}

/**
 * Icon tokens
 * @carbon/icons: https://carbon-elements.netlify.app/icons/examples/preview/
 */

:root {
  --icon-size-sm: 1rem;      /* 16px: Carbon default */
  --icon-size-md: 1.25rem;   /* 20px */
  --icon-size-lg: 1.5rem;    /* 24px */
  --icon-size-xl: 2rem;      /* 32px */
  --icon-gap: var(--spacing-03); /* 8px between icon and label */
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--icon-primary);
  vertical-align: middle;
}

.icon--secondary {
  color: var(--icon-secondary);
}

.icon--on-color {
  color: var(--icon-on-color);
}

.icon [data-icon-path="inner-path"] {
  fill: currentColor;
  opacity: 1;
}