/* Generated from web/src/app/globals.css by build.mjs. Do not edit. */
:root {
  /* --- colors: semantic ------------------------------------------------- */
  --color-bg-canvas: #f7f2e3;      /* the page is paper: the Rowdy Rabbit cream, lifted but still cream */
  --color-bg-surface: #f7f2e3;     /* nothing sits ON the paper as a box; a surface is the paper itself */
  --color-bg-chrome: #e9dfc0;      /* the two fixed chrome pieces (nav, save bar): a clearly deeper cream, the desk under the paper */
  --color-border-default: #e2d9c1;
  --color-text-primary: #1e1a14;   /* warm ink */
  --color-text-muted: #6d655a;
  --color-text-on-brand: #ffffff;

  /* "brand" is the ONE strong colour in the chrome, and it is ink: the
     primary button, the active state, the focus ring. Pennrose's own red
     (#e82028 in the wordmark) is kept for the logo and for danger, where red
     already carries meaning on a defect sheet. Green was never the client's. */
  --color-brand: #1e1a14;
  --color-brand-dark: #000000;
  --color-brand-soft-bg: #ece3cb;

  --color-danger: #d02128;
  --color-danger-soft-bg: #fbeae8;
  --color-danger-soft-border: #f0c8c3;

  --color-warning-bg: #fdf0d5;
  --color-warning-text: #946200;

  /* --- colors: primitives (login gradient stops) ------------------------ */
  --color-neutral-50: #f2ead6;
  --color-neutral-100: #ece3cb;

  /* --- legacy aliases (kept so :root contract is additive) -------------- */
  --bg: var(--color-bg-canvas);
  --surface: var(--color-bg-surface);
  --border: var(--color-border-default);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-dark);
  --danger: var(--color-danger);
  --warning-bg: var(--color-warning-bg);
  --warning-text: var(--color-warning-text);

  /* --- spacing scale (4px base, written in rem) --------------------------
     Spacing, type and radii are rem so they follow the browser's font size
     (an inspector who bumps text size on the iPad gets a bigger app, not
     bigger words in the same boxes). Pixels stay only where a size is
     physical rather than typographic: hairlines, the 44px touch floor, and
     the client's sheet, whose columns are measured against the printed
     template. The comment after each value is its size at the 16px default. */
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;  /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-1-75: 0.4375rem;  /* 7px */
  --space-2: 0.5rem;  /* 8px */
  --space-2-25: 0.5625rem;  /* 9px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-2-75: 0.6875rem;  /* 11px */
  --space-3: 0.75rem;  /* 12px */
  --space-3-25: 0.8125rem;  /* 13px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;  /* 16px */
  --space-4-5: 1.125rem;  /* 18px */
  --space-5: 1.25rem;  /* 20px */
  --space-5-5: 1.375rem;  /* 22px */
  --space-6: 1.5rem;  /* 24px */
  --space-7: 1.75rem;  /* 28px */
  --space-8: 2rem;  /* 32px */

  /* --- typography: families -------------------------------------------- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* --- typography: sizes ----------------------------------------------- */
  --font-size-xs: 0.6875rem;  /* 11px */
  --font-size-sm: 0.75rem;  /* 12px */
  --font-size-sm-plus: 0.8125rem;  /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md: 0.9375rem;  /* 15px */
  --font-size-lg: 1rem;  /* 16px */
  --font-size-xl: 1.25rem;  /* 20px */
  --font-size-2xl: 1.375rem;  /* 22px */
  --font-size-3xl: 1.625rem;  /* 26px */

  /* --- typography: weights --------------------------------------------- */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- typography: line heights ---------------------------------------- */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;

  /* --- typography: tracking -------------------------------------------- */
  --letter-spacing-wide: 0.04em;

  /* --- radii ----------------------------------------------------------- */
  --radius-xs: 0.25rem;  /* 4px */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-sm-plus: 0.4375rem;  /* 7px */
  --radius-md: 0.5rem;  /* 8px */
  --radius-md-plus: 0.5625rem;  /* 9px */
  --radius-lg: 0.625rem;  /* 10px */
  --radius-xl: 0.875rem;  /* 14px */
  --radius-full: 999px;
  --radius-circle: 50%;

  /* legacy alias */
  --radius: var(--radius-lg);

  /* --- border widths --------------------------------------------------- */
  --border-width-1: 1px;

  /* --- shadows --------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(20, 30, 15, 0.08),
    0 1px 2px rgba(20, 30, 15, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 30, 15, 0.16);
  --shadow-lg: 0 10px 30px rgba(20, 40, 15, 0.12);

  /* legacy alias */
  --shadow: var(--shadow-sm);

  /* --- z-index --------------------------------------------------------- */
  --z-nav: 50;

  /* --- misc ------------------------------------------------------------ */
  --gradient-login-bg: linear-gradient(
    160deg,
    var(--color-neutral-50) 0%,
    var(--color-neutral-100) 100%
  );
}