/* ==========================================================================
   EasyInvoice — Design Tokens
   Source of truth for every color, type, space, radius, shadow, and motion
   value used across the app. No component or screen CSS file should ever
   hard-code a raw value that already exists here — always reference the
   token. See EasyInvoice_Frontend_Product_Spec.md Section 2 & Appendix 12.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* Color                                                               */
  /* ------------------------------------------------------------------ */

  /* Ink (text) scale */
  --color-ink: #16211D;          /* primary text, headings */
  --color-ink-muted: #4A554F;    /* secondary text, helper text, placeholders */
  --color-ink-faint: #8A948E;    /* disabled text, timestamps, tertiary labels */

  /* Surfaces */
  --color-paper: #FFFFFF;        /* card / surface background */
  --color-paper-dim: #F4F6F5;    /* app background behind cards */
  --color-border: #E1E6E3;       /* hairline borders, dividers, input outlines */

  /* Brand (teal) */
  --color-brand: #0E7C66;
  --color-brand-dark: #0A5F4E;   /* hover / pressed state */
  --color-brand-tint: #E6F3EF;   /* brand-tinted backgrounds */

  /* Amber (payment details / unpaid accent) */
  --color-amber: #E5A100;
  --color-amber-text: #8A6400;   /* AA-safe darkened amber for text-on-tint */
  --color-amber-tint: #FBF1DA;

  /* Success / Paid (reuses brand teal deliberately — paid = the expected, good state) */
  --color-success: #0E7C66;
  --color-success-tint: #E6F3EF;

  /* Danger / destructive */
  --color-danger: #B3261E;
  --color-danger-tint: #FBEAE9;

  /* ------------------------------------------------------------------ */
  /* Typography                                                          */
  /* ------------------------------------------------------------------ */

  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (rem, base 16px) */
  --text-display: 1.75rem;   /* 28px — hero numbers, e.g. total on preview */
  --text-h1: 1.375rem;       /* 22px — screen titles */
  --text-h2: 1.125rem;       /* 18px — section headers, card titles */
  --text-body: 1rem;         /* 16px — default body/UI text floor */
  --text-small: 0.875rem;    /* 14px — helper text, timestamps */
  --text-micro: 0.75rem;     /* 12px — chip labels, field micro-labels */
  --text-mono-lg: 1.5rem;    /* 24px — total amount on Preview */
  --text-mono-body: 1rem;    /* 16px — line item prices, invoice ID */

  /* Weights (named for clarity at call sites) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ------------------------------------------------------------------ */
  /* Spacing (4px base unit)                                             */
  /* ------------------------------------------------------------------ */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* fixed minimum horizontal screen padding */
  --space-5: 24px;   /* invoice preview card internal padding */
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ------------------------------------------------------------------ */
  /* Radius                                                              */
  /* ------------------------------------------------------------------ */

  --radius-sm: 8px;   /* inputs, chips, buttons */
  --radius-md: 12px;  /* cards, centered modals */
  --radius-lg: 20px;  /* bottom sheets (top corners only) */

  /* ------------------------------------------------------------------ */
  /* Elevation                                                           */
  /* Flat cards use a 1px border, not a shadow — shadows are reserved   */
  /* for overlays only (see Frontend Spec 2.4).                         */
  /* ------------------------------------------------------------------ */

  --shadow-sheet: 0 -4px 24px rgba(22, 33, 29, 0.12); /* bottom sheets / modals */
  --shadow-fab: 0 4px 12px rgba(14, 124, 102, 0.28);  /* FAB only */
  --shadow-dropdown: 0 8px 24px rgba(22, 33, 29, 0.14); /* autocomplete result list */

  /* ------------------------------------------------------------------ */
  /* Motion                                                              */
  /* ------------------------------------------------------------------ */

  --ease-standard: 150ms ease-out;                          /* hover/press, color changes */
  --ease-sheet: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);        /* sheet/modal enter */
  --ease-toast-in: 200ms ease-out;
  --ease-toast-out: 150ms ease-in;

  /* ------------------------------------------------------------------ */
  /* Layout                                                              */
  /* ------------------------------------------------------------------ */

  --screen-padding-x: var(--space-4);
  --content-max-width-sm: 560px;   /* Frontend Spec 3.1, sm breakpoint 600–899px */
  --content-max-width-md: 720px;   /* Frontend Spec 3.1, md+ breakpoint 900px+ */

  --topbar-height: 56px;
  --tabbar-height: 64px;
  --fab-size: 56px;
  --tap-target-min: 48px;          /* accessibility floor, Frontend Spec Section 9 */
}

/* ------------------------------------------------------------------ */
/* Reduced motion — collapse every motion token to effectively instant */
/* when the user (or OS) requests it. See Frontend Spec Section 2.6.   */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-standard: 1ms linear;
    --ease-sheet: 1ms linear;
    --ease-toast-in: 1ms linear;
    --ease-toast-out: 1ms linear;
  }
}