/*
 * Synomem design tokens — design spec §3.12.
 *
 * Dark is the default and the brand identity. Light is a first-class theme.
 * Theme resolution has three states, matching §3.5 and Appendix D.3:
 *   :root                                        -> dark values (the default)
 *   :root[data-theme="light"]                    -> explicit light
 *   @media (prefers-color-scheme: light) on
 *     :root:not([data-theme="dark"])              -> system light
 *
 * Every colour is defined on bare :root first so no token has its only
 * definition inside a media query.
 */

:root {
  /* ---- Foundation (dark, default) ---- */
  --syn-bg: #080b0a;
  --syn-bg-sunken: #050807;
  --syn-surface: #0e1311;
  --syn-surface-raised: #141a17;
  --syn-surface-active: #1a221e;
  --syn-border: #223029;
  --syn-border-subtle: #18211c;
  --syn-border-strong: #31423a;
  --syn-text: #f2f5f3;
  --syn-muted: #89958f;
  --syn-faint: #63706b;
  --syn-disabled: #46514c;

  /* ---- Signal green ---- */
  --syn-green: #00ff72;
  --syn-green-bright: #5bffa6;
  --syn-green-deep: #00c558;
  --syn-green-dim: #0b7a42;
  --syn-green-tint: #062a19;
  --syn-green-on: #04140b;
  --syn-green-accentfill: #00ff72;
  --syn-green-glow: 0 0 0 1px rgba(0, 255, 114, 0.3), 0 0 28px -10px rgba(0, 255, 114, 0.4);

  /* ---- Status semantics (§3.1) ---- */
  --syn-status-success: #3be585;
  --syn-status-success-bg: #062a19;
  --syn-status-success-border: #0b7a42;
  --syn-status-info: #5cc8e8;
  --syn-status-info-bg: #06222a;
  --syn-status-info-border: #155f73;
  --syn-status-warn: #f5be55;
  --syn-status-warn-bg: #2a1e06;
  --syn-status-warn-border: #7a5a18;
  --syn-status-danger: #ff7b7b;
  --syn-status-danger-bg: #2a0e0e;
  --syn-status-danger-border: #7e2626;
  --syn-status-processing: #b49bff;
  --syn-status-processing-bg: #160f2c;
  --syn-status-processing-border: #453578;
  --syn-status-neutral: #90a29c;
  --syn-status-neutral-bg: #101614;
  --syn-status-neutral-border: #26312c;

  /* ---- Record-type hues (§3.2) ---- */
  --syn-kind-kudo: #e07bff;
  --syn-kind-memo: #45d3f0;
  --syn-kind-note: #d9c89c;
  --syn-kind-task: #ffb020;
  --syn-kind-todo: #ff8a3d;
  --syn-kind-post: #2ed8c3;
  --syn-kind-system: #90a29c;

  /* ---- Radius (§3.7) ---- */
  --syn-r-sm: 4px;
  --syn-r-md: 8px;
  --syn-r-lg: 12px;
  --syn-r-full: 999px;

  /* ---- Space scale (§3.7), base 4 ---- */
  --syn-space-2: 2px;
  --syn-space-4: 4px;
  --syn-space-6: 6px;
  --syn-space-8: 8px;
  --syn-space-12: 12px;
  --syn-space-16: 16px;
  --syn-space-20: 20px;
  --syn-space-24: 24px;
  --syn-space-32: 32px;
  --syn-space-40: 40px;
  --syn-space-48: 48px;
  --syn-space-64: 64px;
  --syn-space-80: 80px;

  /* ---- Elevation (§3.7) ---- */
  --syn-shadow-popover: 0 8px 24px -12px rgba(0, 0, 0, 0.85);
  --syn-shadow-dialog: 0 24px 64px -24px rgba(0, 0, 0, 0.9);
  --syn-scrim: rgba(5, 8, 7, 0.74);

  /* ---- Typography (§3.6) ---- */
  --syn-font-ui:
    Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --syn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Motion (§3.11) ---- */
  --syn-ease-quick: cubic-bezier(0.2, 0, 0, 1);
  --syn-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --syn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --syn-dur-hover: 120ms;
  --syn-dur-disclose: 180ms;
  --syn-dur-enter: 240ms;
  --syn-dur-exit: 160ms;

  /* ---- Focus (§3.12) ---- */
  --syn-focus-ring-color: var(--syn-green);
  --syn-focus-ring-width: 2px;
  --syn-focus-ring-offset: 2px;

  /* ---- Layout ---- */
  --syn-content-max: 1360px;
  --syn-prose-max: 68ch;
  --syn-sidebar-w: 240px;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- *
 * Light theme values. Defined once in a mixin-like block that is
 * applied by both the explicit attribute and the system preference.
 * ---------------------------------------------------------------- */

:root[data-theme='light'] {
  --syn-bg: #f7f9f7;
  --syn-bg-sunken: #eef2ef;
  --syn-surface: #ffffff;
  --syn-surface-raised: #ffffff;
  --syn-surface-active: #e8f3ec;
  --syn-border: #d3ded7;
  --syn-border-subtle: #e4ebe6;
  --syn-border-strong: #b3c4ba;
  --syn-text: #0c1f16;
  --syn-muted: #4a5d54;
  --syn-faint: #6b7c74;
  --syn-disabled: #98a6a0;

  --syn-green: #00a44e;
  --syn-green-bright: #00913f;
  --syn-green-deep: #008a3d;
  --syn-green-dim: #b7e4c8;
  --syn-green-tint: #e2f7eb;
  --syn-green-on: #04140b;
  --syn-green-accentfill: #00c558;
  /* §3.5: light theme has no glow. A 2px ring plus a shadow replaces it. */
  --syn-green-glow: 0 0 0 2px var(--syn-green), 0 8px 24px -12px rgba(0, 82, 39, 0.35);

  --syn-status-success: #0b7a42;
  --syn-status-success-bg: #e2f7eb;
  --syn-status-success-border: #8fcfa9;
  --syn-status-info: #0e6e88;
  --syn-status-info-bg: #e4f4f9;
  --syn-status-info-border: #96c9d8;
  --syn-status-warn: #8a5a00;
  --syn-status-warn-bg: #fdf3e0;
  --syn-status-warn-border: #e0be7c;
  --syn-status-danger: #b02525;
  --syn-status-danger-bg: #fdecec;
  --syn-status-danger-border: #e7a2a2;
  --syn-status-processing: #5b3fbf;
  --syn-status-processing-bg: #f0ebfc;
  --syn-status-processing-border: #bfaeea;
  --syn-status-neutral: #4a5d54;
  --syn-status-neutral-bg: #eef2ef;
  --syn-status-neutral-border: #c3d0c8;

  --syn-kind-kudo: #9b2fc4;
  --syn-kind-memo: #0e7490;
  --syn-kind-note: #8a6a1f;
  --syn-kind-task: #a65b00;
  --syn-kind-todo: #b34700;
  --syn-kind-post: #0b7a6e;
  --syn-kind-system: #4a5d54;

  --syn-shadow-popover: 0 8px 24px -12px rgba(12, 31, 22, 0.24);
  --syn-shadow-dialog: 0 24px 64px -24px rgba(12, 31, 22, 0.32);
  --syn-scrim: rgba(12, 31, 22, 0.36);

  /* §3.12: the light focus ring is dark so it survives on green fills. */
  --syn-focus-ring-color: #0c1f16;

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --syn-bg: #f7f9f7;
    --syn-bg-sunken: #eef2ef;
    --syn-surface: #ffffff;
    --syn-surface-raised: #ffffff;
    --syn-surface-active: #e8f3ec;
    --syn-border: #d3ded7;
    --syn-border-subtle: #e4ebe6;
    --syn-border-strong: #b3c4ba;
    --syn-text: #0c1f16;
    --syn-muted: #4a5d54;
    --syn-faint: #6b7c74;
    --syn-disabled: #98a6a0;

    --syn-green: #00a44e;
    --syn-green-bright: #00913f;
    --syn-green-deep: #008a3d;
    --syn-green-dim: #b7e4c8;
    --syn-green-tint: #e2f7eb;
    --syn-green-on: #04140b;
    --syn-green-accentfill: #00c558;
    --syn-green-glow: 0 0 0 2px var(--syn-green), 0 8px 24px -12px rgba(0, 82, 39, 0.35);

    --syn-status-success: #0b7a42;
    --syn-status-success-bg: #e2f7eb;
    --syn-status-success-border: #8fcfa9;
    --syn-status-info: #0e6e88;
    --syn-status-info-bg: #e4f4f9;
    --syn-status-info-border: #96c9d8;
    --syn-status-warn: #8a5a00;
    --syn-status-warn-bg: #fdf3e0;
    --syn-status-warn-border: #e0be7c;
    --syn-status-danger: #b02525;
    --syn-status-danger-bg: #fdecec;
    --syn-status-danger-border: #e7a2a2;
    --syn-status-processing: #5b3fbf;
    --syn-status-processing-bg: #f0ebfc;
    --syn-status-processing-border: #bfaeea;
    --syn-status-neutral: #4a5d54;
    --syn-status-neutral-bg: #eef2ef;
    --syn-status-neutral-border: #c3d0c8;

    --syn-kind-kudo: #9b2fc4;
    --syn-kind-memo: #0e7490;
    --syn-kind-note: #8a6a1f;
    --syn-kind-task: #a65b00;
    --syn-kind-todo: #b34700;
    --syn-kind-post: #0b7a6e;
    --syn-kind-system: #4a5d54;

    --syn-shadow-popover: 0 8px 24px -12px rgba(12, 31, 22, 0.24);
    --syn-shadow-dialog: 0 24px 64px -24px rgba(12, 31, 22, 0.32);
    --syn-scrim: rgba(12, 31, 22, 0.36);

    --syn-focus-ring-color: #0c1f16;

    color-scheme: light;
  }
}

/* §9.7 — prefers-contrast: more raises the border step and lifts faint to muted. */
@media (prefers-contrast: more) {
  :root {
    --syn-border: var(--syn-border-strong);
    --syn-border-subtle: var(--syn-border);
    --syn-faint: var(--syn-muted);
  }
}