/* TF Join design tokens.
   Light is the default. Dark follows the system unless <html data-theme="light|dark"> is set. */

:root {
  color-scheme: light dark;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-display: 600 40px/44px var(--font-sans);   /* landing page only */
  --type-title: 600 28px/34px var(--font-sans);     /* page titles */
  --type-heading: 600 20px/26px var(--font-sans);   /* section headings */
  --type-body-lg: 400 16px/24px var(--font-sans);   /* public page, emails */
  --type-body: 400 14px/20px var(--font-sans);      /* dashboard default */
  --type-label: 500 13px/18px var(--font-sans);     /* form labels, sidebar */
  --type-caption: 400 12px/16px var(--font-sans);   /* column headers, help text */
  --type-mono: 400 13px/20px var(--font-mono);      /* IDs, keys, URLs */

  --tracking-display: -0.022em;
  --tracking-title: -0.018em;
  --tracking-heading: -0.012em;

  /* Space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --row-height: 44px;
  --sidebar-width: 240px;
  --content-max: 1120px;
  --reading-max: 560px;

  /* Shape */
  --radius-field: 6px;
  --radius-menu: 8px;
  --radius-modal: 12px;
  --radius-button: 8px;
  --radius-app-icon: 22.5%;

  /* Motion: state changes only */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Elevation: only for things that float */
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.22);

  /* Colour: light */
  --bg: #ffffff;
  --bg-subtle: #f5f6f8;
  --bg-elevated: #ffffff;
  --bg-selected: #e6f0fa;
  --text: #1a1c1f;
  --text-secondary: #62676e;
  --text-tertiary: #868b93;      /* placeholders and disabled only: below AA for body text */
  --border: #d5d8dd;
  --border-subtle: #e9ebee;
  --accent: #0b62b8;
  --accent-hover: #09559f;
  --accent-pressed: #074887;
  --on-accent: #ffffff;
  --link: #0b5cab;
  --focus: rgba(11, 98, 184, 0.4);
  --danger: #c8102e;

  --status-grey: #8a9099;
  --status-blue: #0b62b8;
  --status-yellow: #f5a623;
  --status-green: #28a745;
  --status-red: #c8102e;

  --toast-bg: #1a1c1f;
  --icon-edge: rgba(0, 0, 0, 0.1);
  --scrim: rgba(0, 0, 0, 0.4);
}

/* Colour: dark. The same values are applied two ways: by system preference, and by data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0d0f;
    --bg-subtle: #17191c;
    --bg-elevated: #1b1d21;
    --bg-selected: #0f2740;
    --text: #f2f3f5;
    --text-secondary: #a0a5ad;
    --text-tertiary: #6b7078;
    --border: #3a3d42;
    --border-subtle: #25282c;
    --accent: #1470cc;            /* a step brighter than light, still carries white text at AA */
    --accent-hover: #0f63b8;
    --accent-pressed: #0b559f;
    --link: #62b0f5;
    --focus: rgba(98, 176, 245, 0.5);
    --danger: #ff6259;

    --status-blue: #62b0f5;
    --status-green: #3fcf6e;
    --status-red: #ff6259;

    --toast-bg: #34373c;
    --icon-edge: rgba(255, 255, 255, 0.14);
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}

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

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0d0f;
  --bg-subtle: #17191c;
  --bg-elevated: #1b1d21;
  --bg-selected: #0f2740;
  --text: #f2f3f5;
  --text-secondary: #a0a5ad;
  --text-tertiary: #6b7078;
  --border: #3a3d42;
  --border-subtle: #25282c;
  --accent: #1470cc;            /* a step brighter than light, still carries white text at AA */
  --accent-hover: #0f63b8;
  --accent-pressed: #0b559f;
  --link: #62b0f5;
  --focus: rgba(98, 176, 245, 0.5);
  --danger: #ff6259;

  --status-blue: #62b0f5;
  --status-green: #3fcf6e;
  --status-red: #ff6259;

  --toast-bg: #34373c;
  --icon-edge: rgba(255, 255, 255, 0.14);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
}