/*
  Portland Fir — Design tokens
  "Evergreen professional": fir green primary, gold accent for focus/
  selection only, warm neutrals. All tokens are CSS custom properties so
  components.css and base.css never hard-code colour/space/type values.

  Light tokens live on :root. Dark tokens are re-declared for:
    - :root:not([data-theme="light"]) inside prefers-color-scheme: dark
      (respects the OS setting when the app hasn't set an explicit theme)
    - :root[data-theme="dark"] (explicit override, e.g. the gallery toggle)
  data-theme="light" always forces light regardless of OS setting.
*/

:root {
  /* ---- Colour: brand ---- */
  --color-fir-900: #163828; /* hover/pressed */
  --color-fir-700: #1F4D3A; /* primary */
  --color-fir-100: #E6EFEA; /* subtle tint */
  --color-gold-600: #B8893B; /* accent — focus rings, highlights, selected */
  --color-gold-100: #F3E9D6;
  --color-gold-text: #7A5A1E; /* AA-safe gold text on tint/bg (gold-600 alone fails AA as text) */

  /* ---- Colour: neutrals (warm) ---- */
  --color-bg: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1EDE5;
  --color-border: #E3DDD2;
  --color-ink: #1C1F1D;
  --color-ink-muted: #5E6660;
  --color-ink-on-primary: #FFFFFF;

  /* ---- Colour: semantic ---- */
  --color-success-700: #2C6E49;
  --color-success-100: #E3F1E8;
  --color-warning-700: #8A5A17;
  --color-warning-100: #FBEEDA;
  --color-danger-700: #A02B2B;
  --color-danger-100: #F8E4E2;
  --color-info-700: #2A5C8A;
  --color-info-100: #E3EEF7;

  /* ---- Semantic role aliases (used by components) ---- */
  --color-primary: var(--color-fir-700);
  --color-primary-hover: var(--color-fir-900);
  --color-primary-pressed: var(--color-fir-900);
  --color-primary-tint: var(--color-fir-100);
  --color-accent: var(--color-gold-600);
  --color-accent-tint: var(--color-gold-100);
  --color-focus-ring: var(--color-gold-600);

  /* ---- Typography ---- */
  --font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-variant-numeric: tabular-nums;

  --font-size-base: 17px;
  --font-size-xs: 0.8235rem;   /* 14 */
  --font-size-sm: 0.9412rem;   /* 16 */
  --font-size-md: 1rem;        /* 17 */
  --font-size-lg: 1.1765rem;   /* 20 */
  --font-size-xl: 1.4118rem;   /* 24 */
  --font-size-2xl: 1.7647rem;  /* 30 */
  --font-size-3xl: 2.3529rem;  /* 40 */

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

  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;

  /* ---- Space (8pt scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* ---- Shadow (layered, soft) ---- */
  --shadow-sm: 0 1px 2px rgba(28, 31, 29, 0.06), 0 1px 1px rgba(28, 31, 29, 0.04);
  --shadow-md: 0 4px 10px rgba(28, 31, 29, 0.08), 0 2px 4px rgba(28, 31, 29, 0.05);
  --shadow-lg: 0 12px 28px rgba(28, 31, 29, 0.14), 0 4px 10px rgba(28, 31, 29, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(28, 31, 29, 0.06);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Touch targets ---- */
  --tap-min: 48px;
  --tap-primary: 56px;

  /* ---- Z-index ---- */
  --z-app-bar: 100;
  --z-action-bar: 100;
  --z-dropdown: 200;
  --z-modal-scrim: 900;
  --z-modal: 910;
  --z-toast: 950;

  /* ---- Safe area ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  color-scheme: light;
}

/* ---------------- Dark mode ---------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fir-700: #4C8B6C;
    --color-fir-900: #6FAE8B;
    --color-fir-100: #1B2C22;
    --color-gold-600: #D3A75C;
    --color-gold-100: #2E2617;
    --color-gold-text: #D3A75C; /* already AA-safe as text in dark mode */

    --color-bg: #0F1512;
    --color-surface: #161E1A;
    --color-surface-2: #1E2823;
    --color-border: #2C3A33;
    --color-ink: #F1F3EF;
    --color-ink-muted: #A6B1AA;
    --color-ink-on-primary: #0F1512;

    --color-success-700: #7BC499;
    --color-success-100: #16281E;
    --color-warning-700: #E4B673;
    --color-warning-100: #2E2617;
    --color-danger-700: #E68B8B;
    --color-danger-100: #2E1A19;
    --color-info-700: #8FBEE4;
    --color-info-100: #182430;

    --color-primary: var(--color-fir-900);
    --color-primary-hover: #85C4A0;
    --color-primary-pressed: #6FAE8B;
    --color-primary-tint: var(--color-fir-100);
    --color-accent: var(--color-gold-600);
    --color-accent-tint: var(--color-gold-100);
    --color-focus-ring: var(--color-gold-600);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.06);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-fir-700: #4C8B6C;
  --color-fir-900: #6FAE8B;
  --color-fir-100: #1B2C22;
  --color-gold-600: #D3A75C;
  --color-gold-100: #2E2617;
  --color-gold-text: #D3A75C;

  --color-bg: #0F1512;
  --color-surface: #161E1A;
  --color-surface-2: #1E2823;
  --color-border: #2C3A33;
  --color-ink: #F1F3EF;
  --color-ink-muted: #A6B1AA;
  --color-ink-on-primary: #0F1512;

  --color-success-700: #7BC499;
  --color-success-100: #16281E;
  --color-warning-700: #E4B673;
  --color-warning-100: #2E2617;
  --color-danger-700: #E68B8B;
  --color-danger-100: #2E1A19;
  --color-info-700: #8FBEE4;
  --color-info-100: #182430;

  --color-primary: var(--color-fir-900);
  --color-primary-hover: #85C4A0;
  --color-primary-pressed: #6FAE8B;
  --color-primary-tint: var(--color-fir-100);
  --color-accent: var(--color-gold-600);
  --color-accent-tint: var(--color-gold-100);
  --color-focus-ring: var(--color-gold-600);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  color-scheme: dark;
}