/* ============================================================================
   QUDS — Qaisbee Unified Product Design System
   Token layer (semantic CSS custom properties).
   CAMPAIGNPROOF-QUDS-UI-SPRINT-01
   ----------------------------------------------------------------------------
   Clean-room implementation from the approved QUDS token sheet only.
   No WorkProof source, markup, assets, or implementation details were used.
   Raw palette values live ONLY in this file; every component and page rule
   must consume the semantic tokens below, never raw hex values.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Inter 4.1 — bundled locally, served from this origin.

   ONE variable file, not four static weights. InterVariable.woff2 is 352 KB and
   covers the whole 100-900 axis; the four static weights this product uses
   (400/500/600/700) are 455 KB combined and cost four requests instead of one.
   The admin is served as static files by nginx, so there is no build step with
   an opinion either way.

   Italic is deliberately NOT shipped. Nothing in the operational chrome uses
   it, and a 388 KB file downloaded to satisfy a checklist is the opposite of
   what bundling a font is for.

   No CDN, no Google Fonts, no external origin of any kind — check:quds-font
   asserts that as a rule over every page rather than trusting this comment.

   font-display: swap so operator text is readable during the font load; these
   are dense operational screens where waiting on a font is worse than a reflow.

   Licence: SIL Open Font License 1.1 — see fonts/Inter-LICENSE.txt, shipped
   alongside the font as the licence requires.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;          /* the variable axis, not a single weight */
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* --- Approved core palette (raw — do not reference outside this file) --- */
  --quds-brand-950: #0e353b;
  --quds-brand-900: #123f46;
  --quds-brand-800: #17505a;
  --quds-brand-700: #1d5a5f;
  --quds-brand-100: #dcebed;
  --quds-brand-50:  #eef5f6;

  --quds-accent:        #e2621a;
  --quds-accent-strong: #d95d0e;
  --quds-accent-soft:   #fceee3;

  --quds-raw-page: #f2efe9;
  --quds-raw-card: #ffffff;
  --quds-raw-ink:  #152e33;

  /* --- Surfaces ----------------------------------------------------------- */
  --quds-page-bg:          var(--quds-raw-page);
  --quds-surface:          var(--quds-raw-card);
  --quds-surface-elevated: var(--quds-raw-card);   /* + shadow level 2 */
  --quds-surface-inset:    var(--quds-brand-50);

  /* --- Text ---------------------------------------------------------------
     All text tokens meet WCAG 2.2 AA (>= 4.5:1) on surface and page bg. */
  --quds-text:           var(--quds-raw-ink);
  --quds-text-secondary: #3d565c;
  --quds-text-muted:     #57696d;
  --quds-text-invert:    #ffffff;

  /* --- Borders ------------------------------------------------------------ */
  --quds-border:        #dbe2e0;
  --quds-border-strong: #9fb4b3;

  /* --- Focus -------------------------------------------------------------- */
  --quds-focus-ring:        var(--quds-brand-700);
  --quds-focus-ring-width:  3px;
  --quds-focus-ring-offset: 2px;

  /* --- Actions -------------------------------------------------------------
     Primary actions are calm brand teal. Accent orange is reserved for a
     small number of attention-bearing actions and highlights; the fill tone
     is a derived deeper step of the approved accent hue so white label text
     meets AA (see 05_ACCESSIBILITY_REVIEW.md). */
  --quds-action-primary:         var(--quds-brand-800);
  --quds-action-primary-hover:   var(--quds-brand-900);
  --quds-action-primary-pressed: var(--quds-brand-950);

  --quds-action-accent:         #b34a05;
  --quds-action-accent-hover:   #9c4004;
  --quds-action-accent-pressed: #863703;

  --quds-accent-highlight: var(--quds-accent);        /* borders, markers    */
  --quds-accent-surface:   var(--quds-accent-soft);   /* soft highlight bg   */
  --quds-accent-ink:       #8f3a04;                   /* text on accent-soft */

  /* --- Status -------------------------------------------------------------- */
  --quds-success:         #146c3c;
  --quds-success-surface: #e6f3ea;
  --quds-success-border:  #a9d5b8;

  --quds-warning:         #7a5200;
  --quds-warning-surface: #fdf3dc;
  --quds-warning-border:  #e5c876;

  --quds-danger:          #b3261e;
  --quds-danger-strong:   #932019;
  --quds-danger-surface:  #fbecea;
  --quds-danger-border:   #ecb0ac;

  --quds-info:            var(--quds-brand-800);
  --quds-info-surface:    var(--quds-brand-50);
  --quds-info-border:     var(--quds-brand-100);

  /* --- Disabled ------------------------------------------------------------ */
  --quds-disabled-bg:   #e8ebea;
  --quds-disabled-text: #7d8c8f;

  /* --- Shadow levels -------------------------------------------------------- */
  --quds-shadow-1: 0 1px 2px rgba(14, 53, 59, 0.06);
  --quds-shadow-2: 0 3px 10px rgba(14, 53, 59, 0.08);
  --quds-shadow-3: 0 12px 32px rgba(14, 53, 59, 0.16);

  /* --- Spacing scale --------------------------------------------------------- */
  --quds-space-1: 4px;
  --quds-space-2: 8px;
  --quds-space-3: 12px;
  --quds-space-4: 16px;
  --quds-space-5: 24px;
  --quds-space-6: 32px;
  --quds-space-7: 48px;

  /* --- Type scale ------------------------------------------------------------
     Inter first, bundled locally from this origin (see the @font-face above).
     No external CDN — that part of the previous contract is unchanged.

     The Noto script fallbacks are kept AFTER Inter and are load-bearing, not
     decoration: Inter does not cover Malayalam, Arabic or Devanagari, so
     removing them would silently degrade those scripts to whatever the browser
     picked. Malayalam in particular is a product requirement.

     Public Sans sits between Inter and the system stack as the agreed
     second-choice UI face for anywhere Inter fails to load. */
  --quds-font: "Inter", "Noto Sans Malayalam", "Public Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari",
               sans-serif;
  --quds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                    "Liberation Mono", monospace;

  --quds-text-display: 1.75rem;   /* 28px — product/display heading  */
  --quds-text-page:    1.4rem;    /* ~22px — page heading (h1)       */
  --quds-text-section: 1.15rem;   /* ~18px — section heading (h2)    */
  --quds-text-card:    1rem;      /* 16px — card heading (h3)        */
  --quds-text-body:    0.95rem;   /* ~15px — body                    */
  --quds-text-small:   0.85rem;   /* ~13.5px — small body / helper   */
  --quds-text-meta:    0.8rem;    /* ~13px — metadata, table small   */

  --quds-leading-tight:  1.25;
  --quds-leading-body:   1.55;
  --quds-leading-loose:  1.7;

  /* --- Radii ------------------------------------------------------------------ */
  --quds-radius:      18px;   /* base — cards, panels        */
  --quds-radius-sm:   10px;   /* controls, inputs, buttons   */
  --quds-radius-xs:   6px;    /* code chips, thumbnails      */
  --quds-radius-pill: 999px;  /* badges, chips               */

  /* --- Controls ----------------------------------------------------------------- */
  --quds-control-height:     40px;   /* minimum interactive height  */
  --quds-control-height-lg:  44px;   /* touch contexts              */

  /* --- Layout -------------------------------------------------------------------- */
  --quds-content-width:        1180px;  /* wide operational pages    */
  --quds-content-width-narrow: 520px;   /* auth / acceptance pages   */
  --quds-gutter:        24px;
  --quds-gutter-mobile: 14px;
  --quds-readable-measure: 72ch;

  /* --- Tables ---------------------------------------------------------------------- */
  --quds-table-pad-y: 10px;
  --quds-table-pad-x: 12px;
  --quds-table-pad-y-compact: 6px;

  /* --- Motion ------------------------------------------------------------------------ */
  --quds-duration-fast: 120ms;
  --quds-duration:      200ms;
  --quds-ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Z-index layers ------------------------------------------------------------------ */
  --quds-z-sticky:  10;   /* sticky table headers          */
  --quds-z-header:  100;  /* app shell header              */
  --quds-z-overlay: 1000; /* future dialogs/toasts         */
}

/* Reduced motion: collapse all animation to effectively instant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --quds-duration-fast: 1ms;
    --quds-duration: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}