/* ============================================================
   PRIMA DESIGN SYSTEM — tokens for BillDocAi
   Mirrored from the "Prima Design System" project
   (tokens/colors.css, tokens/typography.css, tokens/effects.css).

   Keep this file a faithful copy of those tokens. Anything
   app-specific belongs in the component layer in base.html, not
   here, so the design system stays the single source of truth.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --prima-red: #F24600;        /* the bold "Prima" wordmark — primary brand */
  --prima-red-600: #D63E00;    /* hover / pressed */
  --prima-red-100: #FEE7DC;    /* tint surface */

  --prima-orange: #F7941E;     /* the cross / marigold accent */
  --prima-orange-600: #E07F0B;
  --prima-orange-100: #FDEBCF;

  --prima-blue: #0066AD;       /* "Medicine" wordmark — primary blue */
  --prima-blue-700: #03548D;   /* hover / pressed */
  --prima-blue-900: #0C3A63;   /* deep navy headings */
  --prima-blue-100: #DCEBF6;   /* tint surface */

  --prima-teal: #1B9CB8;       /* section accents & underlines */
  --prima-teal-100: #D6EFF4;

  --prima-yellow: #FFD52B;     /* capsule / sunburst badges */
  --prima-yellow-600: #F2C200;

  /* ---- Neutrals (cool, blue-leaning grey) ---- */
  --gray-0:  #FFFFFF;
  --gray-50: #F6F9FB;
  --gray-100:#EEF3F7;
  --gray-200:#DCE4EB;
  --gray-300:#C2CED8;
  --gray-400:#94A4B2;
  --gray-500:#67788A;
  --gray-600:#475766;
  --gray-700:#33414D;
  --gray-800:#1F2A33;
  --gray-900:#121A21;

  /* ---- Feedback ---- */
  --success: #1F8A4C;
  --success-100: #DBF1E3;
  --warning: #F7941E;          /* shares brand marigold */
  --warning-100: #FDEBCF;
  --danger:  #D8362B;
  --danger-100: #FBE0DE;
  --info:    #0066AD;
  --info-100: #DCEBF6;

  /* ---- Semantic aliases ---- */
  --text-strong:  var(--prima-blue-900);
  --text-body:    var(--gray-800);
  --text-muted:   var(--gray-500);
  --text-inverse: var(--gray-0);
  --text-brand:   var(--prima-red);
  --text-link:    var(--prima-blue);

  --surface-page:       var(--gray-50);
  --surface-card:       var(--gray-0);
  --surface-sunken:     var(--gray-100);
  --surface-brand:      var(--prima-blue);
  --surface-brand-soft: var(--prima-blue-100);
  --surface-accent:     var(--prima-orange);
  --surface-highlight:  var(--prima-yellow);
  --surface-inverse:    var(--prima-blue-900);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--prima-blue);

  --action-primary:       var(--prima-blue);
  --action-primary-hover: var(--prima-blue-700);
  --action-primary-text:  var(--gray-0);
  --action-accent:        var(--prima-red);
  --action-accent-hover:  var(--prima-red-600);
  --action-accent-text:   var(--gray-0);

  --focus-ring: color-mix(in srgb, var(--prima-blue) 45%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

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

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---- Effects — friendly & rounded, cool blue shadows ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;        /* capsule — core brand shape */

  --shadow-xs: 0 1px 2px rgba(12, 58, 99, 0.08);
  --shadow-sm: 0 2px 6px rgba(12, 58, 99, 0.10);
  --shadow-md: 0 6px 18px rgba(12, 58, 99, 0.12);
  --shadow-lg: 0 14px 38px rgba(12, 58, 99, 0.16);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* Display face for headings and the wordmark. Baloo 2 sits large on the
   line, so headings get tighter leading to stop them looking loose. */
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--text-strong);
}