/*
 * Wadaif.ly — Design System (foundation)
 * ---------------------------------------------------------------------------
 * Single source of truth for colour, typography, spacing and radius.
 * No component file may hard-code a HEX value; use the variables below.
 *
 * STAGE-ONE SCOPE: tokens, font face, RTL logical helpers and the shared
 * primitives already needed by the CV builder. Component styling for the
 * admin screens is migrated in a later stage.
 *
 * NOTE ON BRAND VALUES
 * The palette below is derived from the accent colours already present in the
 * shipped plugin assets. It is a placeholder set pending confirmation against
 * the official wadaif.ly brand sheet — see the stage report. Changing the
 * brand means editing these variables only, nothing else.
 */

:root {
  /* ---- Brand ---- */
  --wadaif-primary:        #003b95;
  --wadaif-primary-dark:   #002c73;
  --wadaif-primary-light:  #eaf0fb;
  --wadaif-accent:         #f5a800;

  /* ---- Text ---- */
  --wadaif-text:           #172033;
  --wadaif-text-soft:      #475467;
  --wadaif-muted:          #98a2b3;
  --wadaif-on-primary:     #ffffff;

  /* ---- Surfaces ---- */
  --wadaif-background:     #f5f7fa;
  --wadaif-surface:        #ffffff;
  --wadaif-surface-alt:    #f6f7f9;
  --wadaif-border:         #d7dde5;
  --wadaif-border-soft:    #eaecf0;

  /* ---- State ---- */
  --wadaif-success:        #0f7b43;
  --wadaif-success-bg:     #e6f4ec;
  --wadaif-warning:        #946200;
  --wadaif-warning-bg:     #fff4d9;
  --wadaif-danger:         #b42318;
  --wadaif-danger-bg:      #fdecea;
  --wadaif-info:           #003b95;
  --wadaif-info-bg:        #e8f1f9;

  /* ---- Typography ---- */
  --wadaif-font: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --wadaif-fs-xs:   11px;
  --wadaif-fs-sm:   13px;
  --wadaif-fs-base: 15px;
  --wadaif-fs-lg:   18px;
  --wadaif-fs-xl:   24px;
  --wadaif-fs-2xl:  31px;
  --wadaif-lh:      1.7;

  /* ---- Spacing ---- */
  --wadaif-space-1: 4px;
  --wadaif-space-2: 8px;
  --wadaif-space-3: 12px;
  --wadaif-space-4: 16px;
  --wadaif-space-5: 24px;
  --wadaif-space-6: 32px;

  /* ---- Shape ---- */
  --wadaif-radius-sm: 8px;
  --wadaif-radius:    12px;
  --wadaif-radius-lg: 16px;
  --wadaif-radius-pill: 999px;

  /* ---- Elevation ---- */
  --wadaif-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --wadaif-shadow:    0 4px 14px rgba(16, 24, 40, .08);
  --wadaif-shadow-lg: 0 12px 34px rgba(16, 24, 40, .13);

  /* ---- Breakpoints (documentation; media queries cannot use vars) ----
     --wadaif-bp-sm: 600px   phone -> large phone
     --wadaif-bp-md: 782px   matches wp-admin
     --wadaif-bp-lg: 1024px  tablet -> desktop
  */
}

/* ---------------------------------------------------------------------------
 * Cairo, served locally. Drop the .woff2 files into assets/fonts/ to activate.
 * Google Fonts is deliberately not used: it is unreliable inside WebView and
 * adds a third-party request to every candidate page.
 * The stack degrades to Noto Sans Arabic / system Arabic when absent.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
 * RTL foundation.
 * Logical properties throughout, so an LTR locale needs no stylesheet fork.
 * ------------------------------------------------------------------------- */
.wadaif-cv-app {
  font-family: var(--wadaif-font);
  color: var(--wadaif-text);
  font-size: var(--wadaif-fs-base);
  line-height: var(--wadaif-lh);
  text-align: start;
}

.wadaif-cv-app * {
  box-sizing: border-box;
}

/* Utility: full-width child inside a two-column grid.
   Used by .wadaif-grid > .wadaif-full — the class was referenced in markup
   but had no rule at all (defect S-03). */
.wadaif-full {
  grid-column: 1 / -1;
}

/* Media that must never overflow its container on mobile. */
.wadaif-cv-app img {
  max-width: 100%;
  height: auto;
}

/* Touch targets: WebView and mobile need a real hit area, and no design may
   depend on :hover being available. */
.wadaif-cv-app button,
.wadaif-cv-app .wadaif-submit-link,
.wadaif-cv-app .wadaif-secondary-link {
  min-height: 44px;
  touch-action: manipulation;
}