/* ---- Brand typefaces (supplied by Prime; files in design/Fonts) ---- */
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-SemiBoldItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Safiro"; src: url("Fonts/English/Safiro-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "ABC Favorit Arabic"; src: url("Fonts/Arabic/ABCFavoritArabic-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "ABC Favorit Arabic"; src: url("Fonts/Arabic/ABCFavoritArabic-Book.otf") format("opentype"); font-weight: 350; font-display: swap; }
@font-face { font-family: "ABC Favorit Arabic"; src: url("Fonts/Arabic/ABCFavoritArabic-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ABC Favorit Arabic"; src: url("Fonts/Arabic/ABCFavoritArabic-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ABC Favorit Arabic"; src: url("Fonts/Arabic/ABCFavoritArabic-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* Prime Capital design tokens
   Source of truth: design/design-system.md and Branding/BRAND.md
   Import this file first; everything user-facing reads from these variables. */

:root {
  /* ---- Brand palette (sampled from Branding/LOGO RGB-*.png) ---- */
  --prime-navy: #2F3C4F;
  --prime-ink: #111F2D;
  --prime-black: #231F20;
  --prime-plum: #4C3243;
  --prime-plum-deep: #442E3B;
  --prime-forest: #304941;
  --prime-forest-deep: #2B3F36;
  --prime-sky: #C3D3DD;
  --prime-mist: #DFE5EA;
  --prime-sand: #E0DCD5;
  --prime-off-white: #F3F2F0;
  --prime-white: #FFFFFF;

  /* ---- Semantic colours (light theme) ---- */
  --color-bg: var(--prime-off-white);
  --color-bg-elevated: var(--prime-white);
  --color-bg-subtle: var(--prime-sand);
  --color-bg-inverse: var(--prime-ink);
  --color-surface-cool: var(--prime-mist);
  --color-surface-accent: var(--prime-sky);

  --color-text: var(--prime-black);
  --color-text-secondary: #5B6470;
  --color-text-muted: #6F7985;
  --color-text-inverse: var(--prime-white);
  --color-text-on-accent: var(--prime-white);

  --color-border: #D5D8DC;
  --color-border-strong: #B3BBC3;
  --color-border-subtle: #E6E8EA;

  --color-primary: var(--prime-navy);
  --color-primary-hover: #263243;
  --color-primary-active: var(--prime-ink);
  --color-focus: #5B7FA6;

  /* Vertical accents: Trading = forest, Venture = plum */
  --color-trading: var(--prime-forest);
  --color-trading-deep: var(--prime-forest-deep);
  --color-trading-tint: #DCE6E1;
  --color-venture: var(--prime-plum);
  --color-venture-deep: var(--prime-plum-deep);
  --color-venture-tint: #E8DEE4;

  /* Financial semantics: muted, but unmistakable */
  --color-gain: #1F7050;
  --color-gain-tint: #DFF0E7;
  --color-loss: #B23F39;
  --color-loss-tint: #F6E1E0;
  --color-warning: #8F621A;
  --color-warning-tint: #F7EBD6;
  --color-info: #4A6B8C;
  --color-info-tint: var(--prime-mist);

  /* Data visualisation: categorical order */
  --viz-1: var(--prime-navy);
  --viz-2: var(--prime-forest);
  --viz-3: var(--prime-plum);
  --viz-4: #6E8BA8;
  --viz-5: #8FA89A;
  --viz-6: #A58397;
  --viz-7: var(--prime-sky);
  --viz-8: var(--prime-sand);
  --viz-grid: #E3E5E8;
  --viz-axis: #6F7985;

  /* ---- Typography ---- */
  --font-sans: "Safiro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-arabic: "ABC Favorit Arabic", "Safiro", system-ui, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace; /* code blocks only; identifiers use Safiro with tabular figures */

  --text-xs: 0.75rem;    /* 12px  labels, table meta */
  --text-sm: 0.875rem;   /* 14px  secondary, table body */
  --text-base: 1rem;     /* 16px  body */
  --text-lg: 1.125rem;   /* 18px  lead */
  --text-xl: 1.375rem;   /* 22px  h4 */
  --text-2xl: 1.75rem;   /* 28px  h3 */
  --text-3xl: 2.25rem;   /* 36px  h2 */
  --text-4xl: 3rem;      /* 48px  h1 */
  --text-5xl: 4rem;      /* 64px  display */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tabular figures everywhere numbers are compared */
  --numeric: "tnum" 1, "lnum" 1;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Radius: echoes the logomark, one soft corner family ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Elevation: borders first, shadow only when floating ---- */
  --shadow-sm: 0 1px 2px rgba(17, 31, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 31, 45, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 31, 45, 0.12);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: 1rem;
  --gutter-desktop: 2rem;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--prime-ink);
    --color-bg-elevated: #18283A;
    --color-bg-subtle: #1F3044;
    --color-bg-inverse: var(--prime-off-white);
    --color-surface-cool: #1F3044;
    --color-surface-accent: var(--prime-navy);

    --color-text: var(--prime-off-white);
    --color-text-secondary: #B3BBC3;
    --color-text-muted: #7F8A96;
    --color-text-inverse: var(--prime-black);

    --color-border: #2E3D50;
    --color-border-strong: #44546A;
    --color-border-subtle: #223245;

    --color-primary: var(--prime-sky);
    --color-primary-hover: #D3E0E8;
    --color-primary-active: var(--prime-mist);
    --color-text-on-accent: var(--prime-ink);
    --color-focus: #8FB0D1;

    --color-trading: #7FB49C;
    --color-trading-tint: #22362E;
    --color-venture: #B98CA8;
    --color-venture-tint: #3A2733;
    --color-gain: #4FB383;
    --color-gain-tint: #1E3A2C;
    --color-loss: #E06A63;
    --color-loss-tint: #3A1A18;
    --color-warning: #E0A74A;
    --color-warning-tint: #3F3119;
    --color-info-tint: #1F3044;

    --viz-1: var(--prime-sky);
    --viz-2: #7FB49C;
    --viz-3: #B98CA8;
    --viz-4: #6E8BA8;
    --viz-5: #8FA89A;
    --viz-6: #A58397;
    --viz-7: var(--prime-sand);
    --viz-8: var(--prime-navy);
    --viz-grid: #223245;
    --viz-axis: #7F8A96;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--prime-ink);
  --color-bg-elevated: #18283A;
  --color-bg-subtle: #1F3044;
  --color-bg-inverse: var(--prime-off-white);
  --color-surface-cool: #1F3044;
  --color-surface-accent: var(--prime-navy);

  --color-text: var(--prime-off-white);
  --color-text-secondary: #B3BBC3;
  --color-text-muted: #7F8A96;
  --color-text-inverse: var(--prime-black);

  --color-border: #2E3D50;
  --color-border-strong: #44546A;
  --color-border-subtle: #223245;

  --color-primary: var(--prime-sky);
  --color-primary-hover: #D3E0E8;
  --color-primary-active: var(--prime-mist);
  --color-text-on-accent: var(--prime-ink);
  --color-focus: #8FB0D1;

  --color-trading: #7FB49C;
  --color-trading-tint: #22362E;
  --color-venture: #B98CA8;
  --color-venture-tint: #3A2733;
  --color-gain: #4FB383;
  --color-gain-tint: #1E3A2C;
  --color-loss: #E06A63;
  --color-loss-tint: #3A1A18;
  --color-warning: #E0A74A;
  --color-warning-tint: #3F3119;
  --color-info-tint: #1F3044;

  --viz-1: var(--prime-sky);
  --viz-2: #7FB49C;
  --viz-3: #B98CA8;
  --viz-4: #6E8BA8;
  --viz-5: #8FA89A;
  --viz-6: #A58397;
  --viz-7: var(--prime-sand);
  --viz-8: var(--prime-navy);
  --viz-grid: #223245;
  --viz-axis: #7F8A96;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}