/* Timberline color tokens
   Portable: copy this file into the app and consume only the semantic tokens.
   Foundation values are intentionally private implementation details. */

:root,
[data-theme="timberline-light"] {
  color-scheme: light;

  /* Foundation */
  --tl-blue-500: #4a7cff;
  --tl-blue-100: #e9eeff;
  --tl-blue-50: #f3f6ff;

  --tl-neutral-1000: #000000;
  --tl-neutral-950: #11110f;
  --tl-neutral-925: #151514;
  --tl-neutral-900: #1b1b19;
  --tl-neutral-800: #343431;
  --tl-neutral-700: #44433f;
  --tl-neutral-650: #4e5350;
  --tl-neutral-600: #5e5b55;
  --tl-neutral-500: #696760;
  --tl-neutral-400: #888b88;
  --tl-neutral-350: #aaa79e;
  --tl-neutral-300: #c9c6bd;
  --tl-neutral-250: #d8d5cc;
  --tl-neutral-225: #d9d6ce;
  --tl-neutral-200: #e5e2da;
  --tl-neutral-175: #e7e6e1;
  --tl-neutral-150: #ece9e1;
  --tl-neutral-100: #f4f2ec;
  --tl-neutral-50: #f8f7f3;
  --tl-neutral-25: #fbfaf7;
  --tl-neutral-0: #ffffff;

  /* Semantic backgrounds */
  --tl-color-bg-canvas: var(--tl-neutral-0);
  --tl-color-bg-surface: var(--tl-neutral-0);
  --tl-color-bg-surface-raised: var(--tl-neutral-25);
  --tl-color-bg-surface-muted: var(--tl-neutral-150);
  --tl-color-bg-surface-quiet: var(--tl-neutral-50);
  --tl-color-bg-inverse: var(--tl-neutral-950);
  --tl-color-bg-product-field: var(--tl-neutral-650);
  --tl-color-bg-accent-soft: var(--tl-blue-100);

  /* Semantic text */
  --tl-color-text-primary: var(--tl-neutral-950);
  --tl-color-text-secondary: var(--tl-neutral-700);
  --tl-color-text-muted: var(--tl-neutral-500);
  --tl-color-text-subtle: var(--tl-neutral-350);
  --tl-color-text-inverse: var(--tl-neutral-0);
  --tl-color-text-accent: var(--tl-blue-500);

  /* Semantic borders */
  --tl-color-border-subtle: var(--tl-neutral-250);
  --tl-color-border-default: var(--tl-neutral-300);
  --tl-color-border-strong: var(--tl-neutral-400);
  --tl-color-border-inverse: var(--tl-neutral-800);
  --tl-color-border-accent: var(--tl-blue-500);

  /* Actions */
  --tl-color-action-primary-bg: var(--tl-blue-500);
  --tl-color-action-primary-text: var(--tl-neutral-0);
  --tl-color-action-primary-border: var(--tl-blue-500);
  --tl-color-action-primary-hover-bg: #6b94ff;
  --tl-color-action-primary-hover-text: var(--tl-neutral-0);
  --tl-color-action-primary-hover-border: #6b94ff;
  --tl-color-action-secondary-bg: transparent;
  --tl-color-action-secondary-text: var(--tl-neutral-950);
  --tl-color-action-secondary-border: var(--tl-neutral-400);

  /* Product UI */
  --tl-color-sidebar-bg: var(--tl-neutral-950);
  --tl-color-sidebar-text: var(--tl-neutral-0);
  --tl-color-panel-bg: var(--tl-neutral-0);
  --tl-color-input-bg: var(--tl-neutral-25);
  --tl-color-selection-bg: #bdccff;
  --tl-color-highlight-bg: var(--tl-blue-100);
  --tl-color-focus-ring: rgba(74, 124, 255, 0.38);
  --tl-color-overlay: rgba(17, 17, 15, 0.48);
}

[data-theme="timberline-dark"] {
  color-scheme: dark;

  --tl-color-bg-canvas: var(--tl-neutral-950);
  --tl-color-bg-surface: var(--tl-neutral-900);
  --tl-color-bg-surface-raised: var(--tl-neutral-800);
  --tl-color-bg-surface-muted: var(--tl-neutral-800);
  --tl-color-bg-surface-quiet: var(--tl-neutral-900);
  --tl-color-bg-inverse: var(--tl-neutral-0);
  --tl-color-bg-product-field: var(--tl-neutral-900);
  --tl-color-bg-accent-soft: #1b2b57;

  --tl-color-text-primary: var(--tl-neutral-0);
  --tl-color-text-secondary: var(--tl-neutral-300);
  --tl-color-text-muted: var(--tl-neutral-350);
  --tl-color-text-subtle: var(--tl-neutral-400);
  --tl-color-text-inverse: var(--tl-neutral-950);
  --tl-color-text-accent: var(--tl-blue-500);

  --tl-color-border-subtle: var(--tl-neutral-800);
  --tl-color-border-default: var(--tl-neutral-700);
  --tl-color-border-strong: var(--tl-neutral-500);
  --tl-color-border-inverse: var(--tl-neutral-300);
  --tl-color-border-accent: var(--tl-blue-500);

  --tl-color-action-primary-bg: var(--tl-blue-500);
  --tl-color-action-primary-text: var(--tl-neutral-950);
  --tl-color-action-primary-border: var(--tl-blue-500);
  --tl-color-action-primary-hover-bg: var(--tl-neutral-0);
  --tl-color-action-primary-hover-text: var(--tl-neutral-950);
  --tl-color-action-primary-hover-border: var(--tl-neutral-0);
  --tl-color-action-secondary-bg: transparent;
  --tl-color-action-secondary-text: var(--tl-neutral-0);
  --tl-color-action-secondary-border: var(--tl-neutral-500);

  --tl-color-sidebar-bg: var(--tl-neutral-1000);
  --tl-color-sidebar-text: var(--tl-neutral-0);
  --tl-color-panel-bg: var(--tl-neutral-900);
  --tl-color-input-bg: var(--tl-neutral-800);
  --tl-color-selection-bg: #2e4e9e;
  --tl-color-highlight-bg: #1b2b57;
  --tl-color-focus-ring: rgba(74, 124, 255, 0.56);
  --tl-color-overlay: rgba(0, 0, 0, 0.66);
}