/* RAK People Hub — Design tokens v1.0 (production build under /assets)
   Department of Human Resources, Government of Ras Al Khaimah
   Source of truth: /design-system/tokens/rak-people-hub-tokens.css */

@font-face { font-family: "RAK"; src: url("../fonts/rak/RAK-Light.otf")   format("opentype"); font-weight: 300;     font-display: swap; }
@font-face { font-family: "RAK"; src: url("../fonts/rak/RAK-Regular.otf") format("opentype"); font-weight: 400;     font-display: swap; }
@font-face { font-family: "RAK"; src: url("../fonts/rak/RAK-Medium.otf")  format("opentype"); font-weight: 500;     font-display: swap; }
@font-face { font-family: "RAK"; src: url("../fonts/rak/RAK-Bold.otf")    format("opentype"); font-weight: 600 700; font-display: swap; }

:root {
  /* Brand */
  --color-brand-navy-1000: #061B2E;
  --color-brand-navy-900: #0A2540;
  --color-brand-navy-700: #123B63;
  --color-brand-gold-600: #AB7F35;
  --color-brand-gold-500: #C39445;
  --color-brand-gold-400: #E3AD3D;

  /* Accents */
  --color-accent-blue-600: #1668D6;
  --color-accent-blue-500: #2684FF;
  --color-accent-cyan-500: #22C7C9;
  --color-accent-mint-500: #51D6A9;
  --color-accent-coral-500: #FF6B5E;
  --color-accent-violet-500: #7557E8;
  --color-accent-amber-500: #FFB82E;

  /* Surfaces & text */
  --color-surface-ivory: #F8F5EF;
  --color-surface-stone: #E6E3DE;
  --color-surface-white: #FFFFFF;
  --color-text-primary: #292929;
  --color-text-secondary: #55524D;
  --color-text-muted: #9A958C;
  --color-text-inverse: #FFFFFF;
  --color-text-heading: #0A2540; /* navy in light, white in dark */

  /* Feedback */
  --color-feedback-success: #12704F;
  --color-feedback-warning: #8A5A00;
  --color-feedback-error: #C22D22;
  --color-feedback-info: #1668D6;

  /* Pillars */
  --color-pillar-master: #C39445;
  --color-pillar-portal: #2684FF;
  --color-pillar-podcast: #7557E8;
  --color-pillar-training-circle: #22C7C9;
  --color-pillar-training-center: #2684FF;
  --color-pillar-mentorship: #51D6A9;
  --color-pillar-insights: #123B63;
  --color-pillar-live: #FF6B5E;
  --color-pillar-exhibitions: #FFB82E;
  --color-pillar-awards: #E3AD3D;
  --color-pillar-professional-community: #22C7C9;
  --color-pillar-strategic-partnerships: #C39445;

  /* Data visualisation series */
  --color-dataviz-series-1: #0A2540;
  --color-dataviz-series-2: #123B63;
  --color-dataviz-series-3: #2684FF;
  --color-dataviz-series-4: #22C7C9;
  --color-dataviz-series-5: #51D6A9;
  --color-dataviz-series-6: #C39445;
  --color-dataviz-series-7: #FFB82E;
  --color-dataviz-exception: #FF6B5E;

  /* Semantic — light mode (default) */
  --color-surface-page: var(--color-surface-ivory);
  --color-surface-raised: var(--color-surface-white);
  --color-surface-sunken: var(--color-surface-stone);
  --color-surface-inverse: var(--color-brand-navy-900);
  --color-border-default: #E6E3DE;
  --color-border-strong: #D8D4CD;
  --color-action-primary: var(--color-brand-gold-500);
  --color-action-primary-hover: var(--color-brand-gold-600);
  --color-action-primary-active: #96702D;
  --color-action-digital: var(--color-accent-blue-500);
  --color-action-digital-hover: var(--color-accent-blue-600);
  --color-focus-ring: var(--color-accent-blue-500);
  --color-field-surface: var(--color-surface-ivory); /* form field bg — flips in dark */

  /* Typography */
  --font-family-latin: "IBM Plex Sans", system-ui, sans-serif;
  --font-family-arabic: "RAK", system-ui, sans-serif; /* sole approved Arabic face */
  --font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --type-display-size: 64px;      --type-display-lh: 1.05;  --type-display-ls: -0.025em;
  --type-h1-size: 48px;           --type-h1-lh: 1.15;       --type-h1-ls: -0.02em;
  --type-h2-size: 36px;           --type-h2-lh: 1.25;       --type-h2-ls: -0.015em;
  --type-h3-size: 28px;           --type-h3-lh: 1.3;        --type-h3-ls: -0.01em;
  --type-h4-size: 22px;           --type-h4-lh: 1.4;        --type-h4-ls: 0;
  --type-body-lg-size: 19px;      --type-body-lg-lh: 1.65;
  --type-body-size: 16px;         --type-body-lh: 1.7;
  --type-body-sm-size: 14px;      --type-body-sm-lh: 1.6;
  --type-caption-size: 12px;      --type-caption-lh: 1.5;
  --type-label-size: 12px;        --type-label-ls: 0.12em;
  --type-button-size: 16px;       --type-button-lh: 1.2;
  --type-kpi-size: 48px;          --type-kpi-lh: 1;         --type-kpi-ls: -0.02em;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px; --spacing-96: 96px;

  /* Radius & border */
  --radius-none: 0; --radius-sm: 4px; --radius-card: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --border-hairline: 1px; --border-default: 1px; --border-strong: 1.5px; --border-accent-bar: 3px;

  /* Elevation */
  --shadow-low: 0 1px 2px rgba(10, 37, 64, 0.08);
  --shadow-medium: 0 4px 14px rgba(10, 37, 64, 0.10);
  --shadow-high: 0 12px 32px rgba(10, 37, 64, 0.16);

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0, 0, 0.2, 1);
  --motion-base: 200ms cubic-bezier(0.2, 0, 0, 1);
  --motion-slow: 320ms cubic-bezier(0.2, 0, 0, 1);
  --motion-flow: 26s linear;

  /* Grid & breakpoints */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin-desktop: 72px;
  --grid-margin-mobile: 20px;
  --container-max: 1440px;
  --breakpoint-mobile: 360px;
  --breakpoint-tablet: 600px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1280px;
  --breakpoint-wide: 1440px;

  /* Icons & targets */
  --icon-xs: 16px; --icon-sm: 20px; --icon-md: 24px; --icon-lg: 32px; --icon-xl: 48px;
  --icon-stroke: 1.8px;
  --min-hit-target: 44px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* Dark mode — remaps the semantic layer only */
[data-theme="dark"] {
  --color-surface-page: var(--color-brand-navy-900);
  --color-surface-raised: var(--color-brand-navy-700);
  --color-surface-sunken: var(--color-brand-navy-1000);
  --color-surface-inverse: var(--color-surface-ivory);
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-muted: rgba(255, 255, 255, 0.5);
  --color-text-inverse: var(--color-brand-navy-900);
  --color-text-heading: #FFFFFF;
  color-scheme: dark;
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-action-primary: var(--color-brand-gold-400);
  --color-action-digital: #5B9BFF;
  --color-focus-ring: #5B9BFF;
  /* Brighter feedback so pills/alerts read on dark surfaces */
  --color-feedback-success: #3FBE86;
  --color-feedback-warning: #E0A93C;
  --color-feedback-error: #F0705F;
  --color-feedback-info: #5B9BFF;
  --color-field-surface: var(--color-brand-navy-1000); /* dark form field bg */
}

/* Arabic / RTL layout rules */
[dir="rtl"] {
  --type-size-scale-ar: 1.08;
  --line-height-scale-ar: 1.15;
  letter-spacing: 0;
}
[dir="rtl"] body, [lang="ar"] {
  font-family: var(--font-family-arabic);
  line-height: calc(var(--type-body-lh) * 1.08);
}