/* FreshTag design tokens. Colour values mirror Themes/FreshTagPalette.cs (FreshTagTokenParityTests keeps them equal).
   Pages and components use var(--ft-*) only; no hex literals outside this file. The e-ink label palette is separate. */

/* ---- Theme-independent tokens ---- */
:root {
  /* Typography */
  --ft-font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ft-font-sans: var(--ft-font-family); /* overrides the legacy app.css value so old pages pick up the new face */
  --ft-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --ft-text-xs: 12px;
  --ft-text-sm: 13px;
  --ft-text-md: 14px;
  --ft-text-lg: 16px;
  --ft-text-xl: 18px;
  --ft-text-2xl: 22px;
  --ft-text-3xl: 26px;
  --ft-text-display: 32px;
  --ft-text-hero: 64px;
  --ft-weight-regular: 400;
  --ft-weight-medium: 500;
  --ft-weight-semibold: 600;
  --ft-weight-bold: 700;
  --ft-weight-extrabold: 800;
  --ft-leading-tight: 1.15;
  --ft-leading-snug: 1.3;
  --ft-leading-normal: 1.5;
  --ft-tracking-tighter: -0.03em;
  --ft-tracking-tight: -0.015em;
  --ft-tracking-normal: 0;
  --ft-tracking-wide: 0.08em;

  /* Spacing: 4px base, --ft-space-N = N x 4px */
  --ft-space-0: 0;
  --ft-space-1: 4px;
  --ft-space-2: 8px;
  --ft-space-3: 12px;
  --ft-space-4: 16px;
  --ft-space-5: 20px;
  --ft-space-6: 24px;
  --ft-space-7: 28px;
  --ft-space-8: 32px;
  --ft-space-9: 36px;
  --ft-space-10: 40px;
  --ft-space-11: 44px;
  --ft-space-12: 48px;
  --ft-space-13: 52px;
  --ft-space-14: 56px;
  --ft-space-15: 60px;
  --ft-space-16: 64px;

  /* Radius */
  --ft-radius-sm: 8px;
  --ft-radius-md: 12px;
  --ft-radius-lg: 16px;
  --ft-radius-xl: 20px;
  --ft-radius-pill: 999px;

  /* Motion */
  --ft-ease: cubic-bezier(0.2, 0, 0, 1);
  --ft-duration-fast: 120ms;
  --ft-duration-base: 180ms;
  --ft-duration-slow: 280ms;

  /* Layout */
  --ft-sidebar-width: 240px;
  --ft-topbar-height: 72px;
  --ft-content-max: 1200px;
  --ft-control-sm: 36px;
  --ft-control-md: 44px;
  --ft-control-lg: 52px;
  --ft-focus-width: 2px;
  --ft-focus-offset: 2px;
}

/* ---- Light (default) ---- */
:root, [data-ft-theme="light"] {
  color-scheme: light;
  --ft-bg: #F2F3F5;
  --ft-surface: #FFFFFF;
  --ft-surface-2: #F5F6F7;
  --ft-surface-3: #ECEEF0;
  --ft-border: #E3E5E8;
  --ft-border-strong: #CBD0D6;
  --ft-field-border: #80868F;
  --ft-text: #101112;
  --ft-text-muted: #545B66;
  --ft-text-subtle: #656B75;
  --ft-accent: #0095FF;
  --ft-accent-strong: #0070C9;
  --ft-accent-strong-fg: #FFFFFF;
  --ft-accent-ink: #0A0B0C;
  --ft-accent-soft: #E0F0FF;
  --ft-accent-text: #0067BC;
  --ft-inverse: #0A0B0C;
  --ft-inverse-fg: #FFFFFF;
  --ft-success-bg: #E4F7E4;
  --ft-success-fg: #116B0E;
  --ft-success-solid: #14960F;
  --ft-warning-bg: #FFF0D9;
  --ft-warning-fg: #8A4B00;
  --ft-warning-solid: #D98200;
  --ft-danger-bg: #FFE5E5;
  --ft-danger-fg: #B0141A;
  --ft-danger-solid: #DC1F26;
  --ft-info-bg: #E0F0FF;
  --ft-info-fg: #0060AD;
  --ft-info-solid: #0070C9;
  --ft-tone-amber: #FFE6C7;
  --ft-tone-amber-fg: #6B3D00;
  --ft-tone-green: #DDF5DC;
  --ft-tone-green-fg: #0E5E0B;
  --ft-tone-navy: #DCEBFA;
  --ft-tone-navy-fg: #003F75;
  --ft-tone-red: #FFE0E0;
  --ft-tone-red-fg: #8C0B0B;
  --ft-focus: #0070C9;
  --ft-paper: #F4F2EC;
  --ft-paper-ink: #111213;
  --ft-paper-frame: #2A2E30;
  --ft-paper-frame-navy: #0B3D6E;
  --ft-paper-banner: #A80F0F;
  --ft-paper-banner-fg: #FFFFFF;

  --ft-elevation-0: none;
  --ft-elevation-1: 0 1px 2px rgba(16, 17, 18, 0.06), 0 1px 3px rgba(16, 17, 18, 0.04);
  --ft-elevation-2: 0 4px 12px rgba(16, 17, 18, 0.08), 0 1px 3px rgba(16, 17, 18, 0.05);
  --ft-elevation-3: 0 16px 40px rgba(16, 17, 18, 0.16), 0 2px 6px rgba(16, 17, 18, 0.06);
  --ft-scrim: rgba(16, 17, 18, 0.5);
  --ft-hover: rgba(16, 17, 18, 0.04);

  /* Aliases (resolved per theme block, so they must be repeated in each) */
  --ft-field-bg: var(--ft-surface-2);
  --ft-segment-bg: var(--ft-surface-3);
  --ft-segment-active: var(--ft-surface);
  --ft-nav-active: var(--ft-bg);
  --ft-avatar-fg: var(--ft-tone-navy-fg);
}

/* ---- Dark ---- */
[data-ft-theme="dark"] {
  color-scheme: dark;
  --ft-bg: #101112;
  --ft-surface: #151718;
  --ft-surface-2: #1C1F20;
  --ft-surface-3: #24282A;
  --ft-border: #262A2C;
  --ft-border-strong: #383D40;
  --ft-field-border: #6B7176;
  --ft-text: #F5F6F7;
  --ft-text-muted: #A3A9B0;
  --ft-text-subtle: #8E949B;
  --ft-accent: #0095FF;
  --ft-accent-strong: #0095FF;
  --ft-accent-strong-fg: #0A0B0C;
  --ft-accent-ink: #0A0B0C;
  --ft-accent-soft: #0B2A42;
  --ft-accent-text: #4CA9FF;
  --ft-inverse: #0A0B0C;
  --ft-inverse-fg: #FFFFFF;
  --ft-success-bg: #12301A;
  --ft-success-fg: #6EEB6C;
  --ft-success-solid: #4CE94A;
  --ft-warning-bg: #33240B;
  --ft-warning-fg: #FFC266;
  --ft-warning-solid: #F5A524;
  --ft-danger-bg: #3A1416;
  --ft-danger-fg: #FF8A8A;
  --ft-danger-solid: #DC1F26;
  --ft-info-bg: #0B2A42;
  --ft-info-fg: #6CC2FF;
  --ft-info-solid: #0095FF;
  --ft-tone-amber: #9A5800;
  --ft-tone-amber-fg: #FFFFFF;
  --ft-tone-green: #117F0D;
  --ft-tone-green-fg: #FFFFFF;
  --ft-tone-navy: #003F75;
  --ft-tone-navy-fg: #FFFFFF;
  --ft-tone-red: #A80F0F;
  --ft-tone-red-fg: #FFFFFF;
  --ft-focus: #0095FF;
  --ft-paper: #F4F2EC;
  --ft-paper-ink: #111213;
  --ft-paper-frame: #2A2E30;
  --ft-paper-frame-navy: #0B3D6E;
  --ft-paper-banner: #A80F0F;
  --ft-paper-banner-fg: #FFFFFF;

  --ft-elevation-0: none;
  --ft-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ft-elevation-2: 0 6px 16px rgba(0, 0, 0, 0.45);
  --ft-elevation-3: 0 20px 48px rgba(0, 0, 0, 0.6);
  --ft-scrim: rgba(0, 0, 0, 0.6);
  --ft-hover: rgba(245, 246, 247, 0.05);

  /* Aliases (resolved per theme block, so they must be repeated in each) */
  --ft-field-bg: var(--ft-bg);
  --ft-segment-bg: var(--ft-surface);
  --ft-segment-active: var(--ft-surface-3);
  --ft-nav-active: var(--ft-surface-2);
  --ft-avatar-fg: var(--ft-info-fg);
}

/* ---- Static pages (no circuit, no stored preference): follow the OS. Keep in sync with the dark block above. ---- */
@media (prefers-color-scheme: dark) {
  .ft-auto:not([data-ft-theme]) {
    color-scheme: dark;
    --ft-bg: #101112;
    --ft-surface: #151718;
    --ft-surface-2: #1C1F20;
    --ft-surface-3: #24282A;
    --ft-border: #262A2C;
    --ft-border-strong: #383D40;
    --ft-field-border: #6B7176;
    --ft-text: #F5F6F7;
    --ft-text-muted: #A3A9B0;
    --ft-text-subtle: #8E949B;
    --ft-accent: #0095FF;
    --ft-accent-strong: #0095FF;
    --ft-accent-strong-fg: #0A0B0C;
    --ft-accent-ink: #0A0B0C;
    --ft-accent-soft: #0B2A42;
    --ft-accent-text: #4CA9FF;
    --ft-inverse: #0A0B0C;
    --ft-inverse-fg: #FFFFFF;
    --ft-success-bg: #12301A;
    --ft-success-fg: #6EEB6C;
    --ft-success-solid: #4CE94A;
    --ft-warning-bg: #33240B;
    --ft-warning-fg: #FFC266;
    --ft-warning-solid: #F5A524;
    --ft-danger-bg: #3A1416;
    --ft-danger-fg: #FF8A8A;
    --ft-danger-solid: #DC1F26;
    --ft-info-bg: #0B2A42;
    --ft-info-fg: #6CC2FF;
    --ft-info-solid: #0095FF;
    --ft-tone-amber: #9A5800;
    --ft-tone-amber-fg: #FFFFFF;
    --ft-tone-green: #117F0D;
    --ft-tone-green-fg: #FFFFFF;
    --ft-tone-navy: #003F75;
    --ft-tone-navy-fg: #FFFFFF;
    --ft-tone-red: #A80F0F;
    --ft-tone-red-fg: #FFFFFF;
    --ft-focus: #0095FF;
    --ft-paper: #F4F2EC;
    --ft-paper-ink: #111213;
    --ft-paper-frame: #2A2E30;
    --ft-paper-frame-navy: #0B3D6E;
    --ft-paper-banner: #A80F0F;
    --ft-paper-banner-fg: #FFFFFF;

    --ft-elevation-0: none;
    --ft-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ft-elevation-2: 0 6px 16px rgba(0, 0, 0, 0.45);
    --ft-elevation-3: 0 20px 48px rgba(0, 0, 0, 0.6);
    --ft-scrim: rgba(0, 0, 0, 0.6);
    --ft-hover: rgba(245, 246, 247, 0.05);

    /* Aliases (resolved per theme block, so they must be repeated in each) */
    --ft-field-bg: var(--ft-bg);
    --ft-segment-bg: var(--ft-surface);
    --ft-segment-active: var(--ft-surface-3);
    --ft-nav-active: var(--ft-surface-2);
    --ft-avatar-fg: var(--ft-info-fg);
  }
}