/* ==========================================================================
   Storocloud Inference — design tokens v1.0.0 (2026-10-31)
   Consumable by the static site/ directory and the Express portal.
   Prefix: --sc-  (no collisions with the existing portal's --bg/--brand vars)
   Source of truth for values; design/tokens.json mirrors this file for tooling.
   Do not put product facts, prices or operator data in this file.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Primitive colour ----------------------------------------------------- */
  --sc-ink-950: #101615;
  --sc-ink-900: #161c1b;
  --sc-ink-800: #222b29;
  --sc-ink-700: #2e3835;
  --sc-ink-600: #46514d;
  --sc-ink-500: #5c6663;
  --sc-ink-400: #7c8581;
  --sc-ink-300: #a8b0ac;
  --sc-ink-200: #c9cec9;
  --sc-ink-100: #e4e6e1;
  --sc-paper-50: #fbfaf7;
  --sc-paper-100: #f6f5f0;
  --sc-paper-200: #efeee8;
  --sc-paper-300: #e5e3da;
  --sc-white: #ffffff;
  --sc-green-900: #083d33;
  --sc-green-800: #0b4a3d;
  --sc-green-700: #0e5a4a;
  --sc-green-600: #146b58;
  --sc-green-200: #b9d8ce;
  --sc-green-100: #dcebe5;
  --sc-green-50: #e9f2ee;
  --sc-blue-700: #1f4e79;
  --sc-blue-100: #e8f0f7;
  --sc-amber-800: #7a4300;
  --sc-amber-100: #fbf1de;
  --sc-red-700: #a12a2a;
  --sc-red-100: #fbe9e7;
  --sc-grey-700: #47514d;
  --sc-grey-100: #eeefea;

  /* Semantic colour — light --------------------------------------------- */
  --sc-color-bg: #f6f5f0;
  --sc-color-bg-subtle: #efeee8;
  --sc-color-surface: #ffffff;
  --sc-color-surface-raised: #ffffff;
  --sc-color-surface-sunken: #f6f5f0;
  --sc-color-surface-inverse: #161c1b;
  --sc-color-ink: #161c1b;
  --sc-color-ink-secondary: #2e3835;
  --sc-color-ink-muted: #5c6663;
  --sc-color-ink-inverse: #f6f5f0;
  --sc-color-border: #d8d6cc;
  --sc-color-border-strong: #7c8581;
  --sc-color-brand: #0e5a4a;
  --sc-color-brand-hover: #0b4a3d;
  --sc-color-brand-active: #083d33;
  --sc-color-brand-ink: #ffffff;
  --sc-color-brand-soft: #e9f2ee;
  --sc-color-brand-soft-ink: #0b3d33;
  --sc-color-link: #0e5a4a;
  --sc-color-link-hover: #083d33;
  --sc-color-focus: #2e6be6;
  --sc-color-focus-on-brand: #ffffff;
  --sc-color-success: #1f6b45;
  --sc-color-success-bg: #e7f2ea;
  --sc-color-warning: #7a4300;
  --sc-color-warning-bg: #fbf1de;
  --sc-color-danger: #a12a2a;
  --sc-color-danger-hover: #852020;
  --sc-color-danger-bg: #fbe9e7;
  --sc-color-info: #1f4e79;
  --sc-color-info-bg: #e8f0f7;
  --sc-color-neutral-badge-bg: #eeefea;
  --sc-color-neutral-badge-ink: #47514d;
  --sc-color-selection-bg: #cde7de;
  --sc-color-chart-peak: #0e5a4a;
  --sc-color-chart-offpeak: #68988a;
  --sc-color-chart-grid: #d8d6cc;

  /* Typography ----------------------------------------------------------- */
  --sc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sc-weight-regular: 400;
  --sc-weight-medium: 500;
  --sc-weight-semibold: 600;
  --sc-weight-bold: 700;

  --sc-text-100: 0.75rem;
  --sc-text-200: 0.8125rem;
  --sc-text-300: 0.875rem;
  --sc-text-400: 1rem;
  --sc-text-500: 1.125rem;
  --sc-text-600: 1.375rem;
  --sc-text-700: 1.75rem;
  --sc-text-800: 2.25rem;
  --sc-text-900: 3rem;
  --sc-text-1000: 3.75rem;

  --sc-leading-tight: 1.1;
  --sc-leading-heading: 1.2;
  --sc-leading-body: 1.55;
  --sc-leading-relaxed: 1.7;
  --sc-leading-data: 1.35;

  --sc-tracking-tight: -0.025em;
  --sc-tracking-headline: -0.035em;
  --sc-tracking-normal: 0;
  --sc-tracking-wide: 0.04em;
  --sc-tracking-label: 0.08em;

  /* Spacing (4 px base) -------------------------------------------------- */
  --sc-space-0: 0;
  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.25rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;
  --sc-space-20: 5rem;
  --sc-space-24: 6rem;
  --sc-space-32: 8rem;

  /* Radii ---------------------------------------------------------------- */
  --sc-radius-0: 0;
  --sc-radius-100: 2px;
  --sc-radius-200: 4px;
  --sc-radius-300: 6px;
  --sc-radius-400: 10px;
  --sc-radius-500: 14px;
  --sc-radius-full: 999px;

  /* Borders -------------------------------------------------------------- */
  --sc-border-hairline: 1px;
  --sc-border-strong: 2px;
  --sc-border-focus: 3px;

  /* Sizes ---------------------------------------------------------------- */
  --sc-control-sm: 2.25rem;
  --sc-control-md: 2.75rem;
  --sc-control-lg: 3rem;
  --sc-target-min: 1.5rem;
  --sc-target-comfortable: 2.75rem;
  --sc-container: 75rem;
  --sc-container-narrow: 48rem;
  --sc-sidebar: 14.5rem;

  /* Breakpoints (documented here; use the same values in media queries) --- */
  --sc-bp-sm: 30rem;
  --sc-bp-md: 48rem;
  --sc-bp-lg: 64rem;
  --sc-bp-xl: 80rem;

  /* Elevation ------------------------------------------------------------ */
  --sc-elevation-none: none;
  --sc-elevation-100: 0 1px 2px rgba(16, 22, 21, 0.06);
  --sc-elevation-200: 0 4px 12px rgba(16, 22, 21, 0.08), 0 1px 2px rgba(16, 22, 21, 0.06);
  --sc-elevation-300: 0 16px 40px rgba(16, 22, 21, 0.16), 0 2px 6px rgba(16, 22, 21, 0.08);

  /* Focus ---------------------------------------------------------------- */
  --sc-focus-width: 3px;
  --sc-focus-offset: 2px;
  --sc-focus-ring: 0 0 0 var(--sc-focus-width) var(--sc-color-focus);
  --sc-focus-ring-inset: inset 0 0 0 var(--sc-focus-width) var(--sc-color-focus);

  /* Motion --------------------------------------------------------------- */
  --sc-duration-instant: 0ms;
  --sc-duration-fast: 120ms;
  --sc-duration-base: 180ms;
  --sc-duration-slow: 240ms;
  --sc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Component aliases ---------------------------------------------------- */
  --sc-button-height-sm: var(--sc-control-sm);
  --sc-button-height-md: var(--sc-control-md);
  --sc-button-height-lg: var(--sc-control-lg);
  --sc-button-padding-x-sm: var(--sc-space-3);
  --sc-button-padding-x-md: var(--sc-space-4);
  --sc-button-padding-x-lg: var(--sc-space-5);
  --sc-button-radius: var(--sc-radius-300);

  --sc-input-height: var(--sc-control-md);
  --sc-input-padding-x: var(--sc-space-3);
  --sc-input-radius: var(--sc-radius-300);
  --sc-input-border: var(--sc-color-border-strong);
  --sc-input-border-focus: var(--sc-color-brand);

  --sc-card-radius: var(--sc-radius-400);
  --sc-card-padding: var(--sc-space-5);
  --sc-card-border: var(--sc-color-border);
  --sc-card-bg: var(--sc-color-surface);

  --sc-table-header-height: 2.5rem;
  --sc-table-row-height: 2.75rem;
  --sc-table-padding-x: var(--sc-space-3);
  --sc-table-border: var(--sc-color-border);

  --sc-badge-height: 1.5rem;
  --sc-badge-padding-x: var(--sc-space-2);
  --sc-badge-radius: var(--sc-radius-full);

  --sc-dialog-radius: var(--sc-radius-500);
  --sc-dialog-padding: var(--sc-space-6);
}

/* Dark theme: explicit opt-in, or system preference when no theme is set.
   Public site: light-first. Portal: may follow the system or offer a toggle. */
[data-theme="dark"] {
  color-scheme: dark;

  --sc-color-bg: #101615;
  --sc-color-bg-subtle: #17201e;
  --sc-color-surface: #17201e;
  --sc-color-surface-raised: #1d2825;
  --sc-color-surface-sunken: #0c1211;
  --sc-color-surface-inverse: #f6f5f0;
  --sc-color-ink: #f2f4f2;
  --sc-color-ink-secondary: #d5dad5;
  --sc-color-ink-muted: #a8b3af;
  --sc-color-ink-inverse: #101615;
  --sc-color-border: #2f3b38;
  --sc-color-border-strong: #7f8c87;
  --sc-color-brand: #5fc3aa;
  --sc-color-brand-hover: #7ed3bd;
  --sc-color-brand-active: #9be0cd;
  --sc-color-brand-ink: #0b1512;
  --sc-color-brand-soft: #1b332d;
  --sc-color-brand-soft-ink: #b9e6d8;
  --sc-color-link: #7ed3bd;
  --sc-color-link-hover: #9be0cd;
  --sc-color-focus: #8fb4ff;
  --sc-color-focus-on-brand: #0b1512;
  --sc-color-success: #7ed3a6;
  --sc-color-success-bg: #162c22;
  --sc-color-warning: #f3c77b;
  --sc-color-warning-bg: #2e2412;
  --sc-color-danger: #ff9b93;
  --sc-color-danger-hover: #ffb7b1;
  --sc-color-danger-bg: #331a18;
  --sc-color-info: #9fc3e8;
  --sc-color-info-bg: #162633;
  --sc-color-neutral-badge-bg: #242e2b;
  --sc-color-neutral-badge-ink: #c3cbc7;
  --sc-color-selection-bg: #23473e;
  --sc-color-chart-peak: #5fc3aa;
  --sc-color-chart-offpeak: #3d8a76;
  --sc-color-chart-grid: #2f3b38;

  --sc-elevation-100: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sc-elevation-200: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sc-elevation-300: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --sc-color-bg: #101615;
    --sc-color-bg-subtle: #17201e;
    --sc-color-surface: #17201e;
    --sc-color-surface-raised: #1d2825;
    --sc-color-surface-sunken: #0c1211;
    --sc-color-surface-inverse: #f6f5f0;
    --sc-color-ink: #f2f4f2;
    --sc-color-ink-secondary: #d5dad5;
    --sc-color-ink-muted: #a8b3af;
    --sc-color-ink-inverse: #101615;
    --sc-color-border: #2f3b38;
    --sc-color-border-strong: #7f8c87;
    --sc-color-brand: #5fc3aa;
    --sc-color-brand-hover: #7ed3bd;
    --sc-color-brand-active: #9be0cd;
    --sc-color-brand-ink: #0b1512;
    --sc-color-brand-soft: #1b332d;
    --sc-color-brand-soft-ink: #b9e6d8;
    --sc-color-link: #7ed3bd;
    --sc-color-link-hover: #9be0cd;
    --sc-color-focus: #8fb4ff;
    --sc-color-focus-on-brand: #0b1512;
    --sc-color-success: #7ed3a6;
    --sc-color-success-bg: #162c22;
    --sc-color-warning: #f3c77b;
    --sc-color-warning-bg: #2e2412;
    --sc-color-danger: #ff9b93;
    --sc-color-danger-hover: #ffb7b1;
    --sc-color-danger-bg: #331a18;
    --sc-color-info: #9fc3e8;
    --sc-color-info-bg: #162633;
    --sc-color-neutral-badge-bg: #242e2b;
    --sc-color-neutral-badge-ink: #c3cbc7;
    --sc-color-selection-bg: #23473e;
    --sc-color-chart-peak: #5fc3aa;
    --sc-color-chart-offpeak: #3d8a76;
    --sc-color-chart-grid: #2f3b38;

    --sc-elevation-100: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sc-elevation-200: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    --sc-elevation-300: 0 16px 40px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

/* Users who ask for more contrast get a stronger border and link treatment. */
@media (prefers-contrast: more) {
  :root {
    --sc-color-border: #7c8581;
    --sc-color-border-strong: #46514d;
    --sc-color-ink-muted: #3f4945;
    --sc-color-link: #083d33;
  }
}

/* Reduced motion: durations collapse to zero. Components must not translate
   layout or animate opacity for meaning; this only removes decoration. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-duration-instant: 0ms;
    --sc-duration-fast: 0ms;
    --sc-duration-base: 0ms;
    --sc-duration-slow: 0ms;
  }
}