/*
 * Design tokens for the new UI layer (Bootstrap 5).
 *
 * This file is the single source of colour, type, shape and spacing values.
 * Every other stylesheet in static/ui/ reads these variables; none of them
 * should hard-code a brand colour. It has no dependency on Bootstrap and is
 * also safe to load on legacy Bootstrap 4 pages (the shared topbar uses it).
 *
 * Brand rules (from the CERA logo and cera-india.com): CERA blue #0071bb
 * drives actions, links and active states; CERA navy #002d56 is the heading
 * and dark-panel colour; CERA gold #ae8f21 is a sparing premium accent; CERA
 * teal #005e63 is the secondary/info colour. Page titles use Prata (CERA's
 * display serif); everything else stays Inter for dense, legible data.
 * Nuvena appears small (footer, favicon) with its own navy and gold.
 */

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/prata-latin-400-normal.woff2") format("woff2");
}

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

:root {
  /* Brand */
  --ui-cera-blue: #0071bb;
  --ui-cera-navy: #002d56;
  --ui-cera-gold: #ae8f21;
  --ui-cera-teal: #005e63;
  --ui-nuvena-navy: #1b2a4a;
  --ui-nuvena-gold: #d4a03c;

  /* Semantic colours */
  --ui-primary: var(--ui-cera-blue);
  --ui-primary-rgb: 0, 113, 187;
  --ui-primary-hover: #005f9d;
  --ui-primary-active: #004f83;
  --ui-primary-soft: #e6f1f8;
  --ui-heading: var(--ui-cera-navy);
  --ui-accent: var(--ui-cera-gold);
  --ui-accent-soft: #f6f0dc;
  --ui-text: #1f2937;
  --ui-text-muted: #64748b;
  --ui-bg: #f4f6f9;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafc;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-success: #16a34a;
  --ui-success-soft: #ecfdf3;
  --ui-warning: #d97706;
  --ui-warning-soft: #fffbeb;
  --ui-danger: #dc2626;
  --ui-danger-soft: #fef2f2;
  --ui-info: var(--ui-cera-teal);
  --ui-info-soft: #e5f1f1;

  /* The same colours as "r, g, b" triplets, for Bootstrap's rgba(var(--bs-*-rgb), a)
     variables. Keep each one in step with its hex value above. */
  --ui-primary-hover-rgb: 0, 95, 157;
  --ui-heading-rgb: 0, 45, 86;
  --ui-text-rgb: 31, 41, 55;
  --ui-text-muted-rgb: 100, 116, 139;
  --ui-bg-rgb: 244, 246, 249;
  --ui-surface-rgb: 255, 255, 255;
  --ui-surface-2-rgb: 248, 250, 252;
  --ui-success-rgb: 22, 163, 74;
  --ui-warning-rgb: 217, 119, 6;
  --ui-danger-rgb: 220, 38, 38;
  --ui-info-rgb: 0, 94, 99;

  /* Type */
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-font-display: "Prata", Georgia, "Times New Roman", serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui-font-size: 0.875rem;
  --ui-font-size-sm: 0.8125rem;
  --ui-font-size-lg: 1rem;
  --ui-line-height: 1.5;

  /* Shape: controls (inputs, selects, buttons) use --ui-radius-control;
     cards, dropdowns and toasts --ui-radius; modals --ui-radius-lg;
     badges and pills --ui-radius-pill. */
  --ui-radius-sm: 8px;
  --ui-radius-control: 10px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ui-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ui-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.14);
  --ui-focus-ring: 0 0 0 3px rgba(var(--ui-primary-rgb), 0.25);
  --ui-shadow-hover: 0 6px 16px -4px rgba(16, 24, 40, 0.14), 0 2px 4px -2px rgba(16, 24, 40, 0.06);

  /* Motion. Every animation or transition is wrapped in
     @media (prefers-reduced-motion: no-preference). */
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui-dur-fast: 120ms;
  --ui-dur: 180ms;

  /* Layout */
  --ui-topbar-h: 60px;
  --ui-content-max: 1440px;
  --ui-gutter: 1.25rem;
}

[data-bs-theme="dark"] {
  --ui-primary: #4aa3dd;
  --ui-primary-rgb: 74, 163, 221;
  --ui-primary-hover: #66b2e3;
  --ui-primary-active: #82c0e8;
  --ui-accent: #d1b04a;
  --ui-accent-soft: #3a3110;
  --ui-info: #3fa3a8;
  --ui-primary-soft: #102a42;
  --ui-heading: #f1f5f9;
  --ui-text: #e2e8f0;
  --ui-text-muted: #94a3b8;
  --ui-bg: #0f172a;
  --ui-surface: #111827;
  --ui-surface-2: #1e293b;
  --ui-border: #334155;
  --ui-border-strong: #475569;
  --ui-success-soft: #052e16;
  --ui-warning-soft: #3a2503;
  --ui-danger-soft: #3b0a0a;
  --ui-info-soft: #082f49;

  --ui-primary-hover-rgb: 102, 178, 227;
  --ui-heading-rgb: 241, 245, 249;
  --ui-text-rgb: 226, 232, 240;
  --ui-text-muted-rgb: 148, 163, 184;
  --ui-bg-rgb: 15, 23, 42;
  --ui-surface-rgb: 17, 24, 39;
  --ui-surface-2-rgb: 30, 41, 59;
}