/* PanelPlanner brand tokens
 * Source of truth for color, type and shape. Import once at the app root.
 * Fonts: copy /fonts/*.woff2 to /public/fonts/ (or change the url() paths).
 */

/* ---------- Fonts: IBM Plex Sans (SIL Open Font License) ---------- */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand colors ---------- */
  --pp-navy: #131923;        /* primary: text, mark, dark surfaces, primary buttons */
  --pp-birch: #E6CFA6;       /* accent: accent piece on dark, birch tile, secondary buttons */
  --pp-birch-deep: #B5874B;  /* accent piece on light backgrounds — graphics only (3.2:1 on white) */
  --pp-birch-ink: #8A6232;   /* birch-toned TEXT on white (5.4:1) */
  --pp-white: #FFFFFF;

  /* ---------- Neutrals (cool slate, tuned to navy) ---------- */
  --pp-slate-700: #3F4754;   /* secondary text (9.4:1 on white) */
  --pp-slate-500: #5B6472;   /* muted text, labels (6.0:1 on white) */
  --pp-slate-300: #9AA4B5;   /* muted text on navy (7.0:1) */
  --pp-slate-200: #C9D0DB;   /* nav text on navy, disabled borders */
  --pp-slate-150: #DDE2E9;
  --pp-slate-100: #E3E7EC;   /* borders, table rules */
  --pp-slate-50:  #EEF1F5;   /* page background, subtle surfaces */
  --pp-slate-25:  #F7F8FA;

  /* ---------- Functional (proposed — confirm before relying on them) ---------- */
  --pp-success: #1F7A5C;     /* "cut" / done states (5.3:1 on white) */
  --pp-danger:  #B3261E;     /* errors, destructive actions (6.5:1 on white) */

  /* ---------- Semantic aliases ---------- */
  --pp-bg: var(--pp-slate-50);
  --pp-surface: var(--pp-white);
  --pp-text: var(--pp-navy);
  --pp-text-secondary: var(--pp-slate-700);
  --pp-text-muted: var(--pp-slate-500);
  --pp-border: var(--pp-slate-100);
  --pp-primary: var(--pp-navy);
  --pp-on-primary: var(--pp-white);
  --pp-accent: var(--pp-birch);
  --pp-on-accent: var(--pp-navy);
  --pp-focus: var(--pp-navy);

  /* ---------- Type ---------- */
  --pp-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-text-xs: 0.75rem;    /* 12 — table headers, overlines */
  --pp-text-sm: 0.8125rem;  /* 13 — meta, captions */
  --pp-text-base: 0.9375rem;/* 15 — body, tables */
  --pp-text-md: 1.0625rem;  /* 17 — lead text */
  --pp-text-lg: 1.375rem;   /* 22 — section headings */
  --pp-text-xl: 1.75rem;    /* 28 — page titles */
  --pp-text-2xl: 2.5rem;    /* 40 — marketing headlines */
  --pp-leading-tight: 1.2;
  --pp-leading-body: 1.5;
  --pp-tracking-tight: -0.015em; /* headings + wordmark */
  --pp-tracking-overline: 0.08em;

  /* ---------- Shape & spacing ---------- */
  --pp-radius-sm: 6px;
  --pp-radius: 8px;          /* buttons, inputs */
  --pp-radius-lg: 14px;      /* cards, panels */
  --pp-radius-icon: 22.5%;   /* app icon tile corner */
  --pp-space-1: 4px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 24px;
  --pp-space-6: 32px;
  --pp-space-7: 48px;
  --pp-space-8: 64px;
}

/* ---------- Base ---------- */
html { font-family: var(--pp-font); color: var(--pp-text); background: var(--pp-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 700; letter-spacing: var(--pp-tracking-tight); line-height: var(--pp-leading-tight); }

/* Dimensions, quantities, cut lists: aligned figures + slashed zero */
.pp-num, table, [data-numeric] { font-variant-numeric: tabular-nums slashed-zero; }

:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 2px; }