/**
 * PlainFig Design Tokens
 * Source: plainfig-ui-ux-brief-20261015.md
 *
 * @package PlainFig
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  /* -------------------------------------------------------------
   * 1. Brand Color Palette (UI/UX Brief Section 1)
   * ------------------------------------------------------------- */
  --pf-paper: #F8F7F4;          /* Warm page background */
  --pf-navy: #0F172A;           /* Header, footer, hero, headings */
  --pf-green: #2E7D32;          /* Primary accent: CTAs, links, highlights */
  --pf-green-dark: #1B5E20;     /* CTA hover */
  --pf-amber: #F59E0B;          /* Secondary accent: badges, sliders, focus */
  --pf-emerald: #059669;        /* Positive figures (savings, growth) */
  --pf-red: #DC2626;            /* Costs, debt, negative figures */
  --pf-ink: #0F172A;            /* Primary dark text / headings */
  --pf-body: #475569;           /* Secondary body text */
  --pf-bg-soft: #FFFFFF;        /* Card surfaces on paper */
  --pf-border: #E2E8F0;         /* 1px borders, separators */

  /* -------------------------------------------------------------
   * 2. Typography Scale
   * ------------------------------------------------------------- */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 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 */
  --text-2xl: 1.5rem;     /* 24px - H2 default */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px - H1 default */
  --text-5xl: 3rem;       /* 48px - Display / hero */

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

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* -------------------------------------------------------------
   * 3. Spacing Scale (4/8dp rhythm)
   * ------------------------------------------------------------- */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* -------------------------------------------------------------
   * 4. Border Radius
   * ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;       /* Primary button & input radius */
  --radius-lg: 12px;      /* Card radius */
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------
   * 5. Elevation & Shadows
   * ------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(245, 158, 11, 0.35); /* Amber focus ring */

  /* -------------------------------------------------------------
   * 6. Motion & Transitions
   * ------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-lift: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* -------------------------------------------------------------
   * 7. Layout Containers
   * ------------------------------------------------------------- */
  --max-width-layout: 72rem;  /* 1152px */
  --max-width-content: 42rem; /* 672px - Optimal reading length */
}

/* Accessibility: Respect user prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}