/* ============================================================================
   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.
   ========================================================================== */

: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 ------------------------------------------------------------
     System font stack only — no downloaded fonts, no external CDNs. */
  --quds-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Noto Sans Malayalam", "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;
  }
}