/* ==========================================================================
   AFRIDAL design tokens — the single place where brand values live.
   Palette comes from the AFRIDAL logo / brief. Where a brief colour fails
   WCAG AA for the way it is used, a "-ink" / "-action" variant is provided
   and the original is kept for large elements, icons and accents.
   ========================================================================== */

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

:root {
  /* ---- Brand palette (from the brief) ---- */
  --navy: #123F78;            /* primary navy: headings, branding, key actions */
  --navy-deep: #082B50;       /* sidebar */
  --navy-dark: #062746;       /* sidebar base / darkest */
  --blue: #1767A8;            /* secondary blue */
  --teal: #078F79;            /* primary teal: icons, highlights, success accents */
  --teal-deep: #087565;       /* deep teal */
  --teal-light: #E4F5F0;      /* light teal background */
  --mint: #37D3B5;            /* bright mint used only on dark surfaces (hero highlight) */

  --bg: #F3F6FA;              /* main page background */
  --surface: #FFFFFF;         /* cards and panels */
  --text: #172B43;            /* primary text */
  --text-secondary: #687B90;  /* brief value — only for large / non-essential text (4.35:1) */
  --border: #E0E8F0;

  /* ---- Accessible derivatives ---- */
  --text-muted: #5A6D82;      /* secondary text at small sizes: 5.3:1 on white, 4.9:1 on --bg */
  --action: #087565;          /* filled teal buttons / active nav: white text = 5.6:1 */
  --action-hover: #06695A;    /* 6.6:1 */
  --border-input: #7A8EA4;    /* form-control boundary: 3.4:1 (WCAG 1.4.11) */
  --focus: #078F79;           /* focus ring on light surfaces (4.0:1) */
  --focus-on-dark: #5EE0C5;   /* focus ring on navy surfaces (8.8:1) */

  /* ---- Status tones (foreground/background pairs all >= 5:1) ---- */
  --ok-bg: #E1F6EE;     --ok-fg: #0A6B50;
  --warn-bg: #FFF1D6;   --warn-fg: #8A5A06;
  --bad-bg: #FDE9EB;    --bad-fg: #A82C38;
  --info-bg: #E6F0FB;   --info-fg: #1B5A99;
  --neutral-bg: #EDF1F6; --neutral-fg: #4B5E73;
  --sold-bg: #E3EAF6;   --sold-fg: #123F78;
  --count-bg: #C92F3E;  /* notification count: white text 5.4:1 */

  /* ---- Sidebar surface ---- */
  --sb-text: #D3E2F1;
  --sb-label: #8FB1D1;
  --sb-note: #A9C3DA;

  /* ---- Pointer: white hand with a navy outline (visible on both white and navy surfaces); hotspot = fingertip ---- */
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='#082B50' stroke='#082B50' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='9.5' y='1.5' width='5' height='16' rx='2.5'/%3E%3Crect x='14.5' y='9' width='4.5' height='12' rx='2.25'/%3E%3Crect x='19' y='10.5' width='4.5' height='11' rx='2.25'/%3E%3Crect x='23.5' y='12.5' width='4' height='10' rx='2'/%3E%3Crect x='8' y='14' width='19.5' height='15' rx='6.5'/%3E%3Cellipse cx='7.2' cy='20.5' rx='3' ry='5' transform='rotate(-28 7.2 20.5)'/%3E%3C/g%3E%3Cg fill='#FFFFFF'%3E%3Crect x='9.5' y='1.5' width='5' height='16' rx='2.5'/%3E%3Crect x='14.5' y='9' width='4.5' height='12' rx='2.25'/%3E%3Crect x='19' y='10.5' width='4.5' height='11' rx='2.25'/%3E%3Crect x='23.5' y='12.5' width='4' height='10' rx='2'/%3E%3Crect x='8' y='14' width='19.5' height='15' rx='6.5'/%3E%3Cellipse cx='7.2' cy='20.5' rx='3' ry='5' transform='rotate(-28 7.2 20.5)'/%3E%3C/g%3E%3Cg fill='none' stroke='#082B50' stroke-width='1' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M14.6 17.5v4M19 18.5v3.5M23.5 19.5v2.5'/%3E%3C/g%3E%3C/svg%3E") 12 2, pointer;

  /* ---- Shape, depth, spacing ---- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --shadow-1: 0 1px 2px rgba(18, 63, 120, .06), 0 4px 14px rgba(18, 63, 120, .05);
  --shadow-pop: 0 12px 36px rgba(8, 43, 80, .18);
  --shadow-modal: 0 24px 80px rgba(6, 39, 70, .35);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --sidebar-w: 240px;
  --topbar-h: 68px;
  --page-max: 1640px;

  /* ---- Type ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 12px;     /* smallest text anywhere in the UI */
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}