/*
 * Design tokens — MeetTwig ("Structured Clarity")
 * Source of truth: docs/design-system.md (§4–7) and docs/motion.md (§4–5).
 * Every color/spacing/type/radius/shadow/motion value used anywhere in the
 * product should reference one of these custom properties — no ad-hoc values.
 */

:root {
  /* ---------------------------------------------------------------
   * Color — core
   * ------------------------------------------------------------- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-text: #1E293B;
  --color-text-muted: #475569;
  --color-heading: #0B1E33;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  --color-primary: #1D4ED8;
  --color-primary-hover: #1E40AF;
  --color-primary-soft: #EFF4FF;

  --color-accent: #16A34A;
  --color-success: #15803D;
  --color-success-bg: #F0FDF4;
  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-error: #B91C1C;
  --color-error-bg: #FEF2F2;

  --color-focus: #1D4ED8;
  --color-focus-on-dark: #93C5FD;

  /* App-surface tokens */
  --color-app-content-bg: #F5F7FA;
  --color-app-sidebar-bg: #0B1E33;
  --color-app-sidebar-text: #C9D6E8;
  --color-app-sidebar-text-active: #FFFFFF;
  --color-app-sidebar-active-bg: #16305A;
  --color-app-topbar-bg: #FFFFFF;
  --color-app-card-bg: #FFFFFF;

  /* ---------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px, desktop 22px handled via clamp */
  --display-sm: 1.5rem;    /* 24px -> 28px desktop */
  --display-md: 1.75rem;   /* 28px -> 34px desktop */
  --display-lg: 2.125rem;  /* 34px -> 44px desktop */
  --display-xl: 2.25rem;   /* 36px -> 56px desktop */

  /* ---------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-wide: 1320px;
  --app-max: 1440px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------------------------------------------------------------
   * Shape / depth
   * ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --border-width-default: 1px;
  --border-width-rule: 3px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px rgba(29, 78, 216, 0.25);
  --scrim: rgba(11, 30, 51, 0.45);

  /* ---------------------------------------------------------------
   * Motion (docs/motion.md §4–5)
   * ------------------------------------------------------------- */
  --motion-instant: 80ms;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 220ms;
  --motion-slower: 260ms;
  --motion-spinner-cycle: 900ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;
}