/*
 * Qasda design tokens
 * -------------------
 * This is the single source of truth for the live visual system.
 * Components should consume semantic tokens instead of raw values.
 */

:root {
  color-scheme: light;

  /* Brand */
  --qasda-ink: #232522;
  --qasda-ink-soft: #505650;
  --qasda-muted: #6d746e;
  --qasda-canvas: #faf9f6;
  --qasda-surface: #ffffff;
  --qasda-surface-soft: #f2f3ef;
  --qasda-line: #dedfd9;
  --qasda-line-strong: #c8cbc4;
  --qasda-green: #11b99a;
  --qasda-green-dark: #08745f;
  --qasda-green-soft: #e5f7f2;

  /* Semantic feedback */
  --qasda-success: #08745f;
  --qasda-success-soft: #e5f7f2;
  --qasda-warning: #8a5a10;
  --qasda-warning-soft: #fff4d8;
  --qasda-danger: #a8443d;
  --qasda-danger-soft: #faeeeb;
  --qasda-info: #315f74;
  --qasda-info-soft: #eaf3f6;

  /* Type families */
  --qasda-font-latin: "Manrope", sans-serif;
  --qasda-font-arabic: "Cairo", sans-serif;

  /* Fluid type scale */
  --qasda-type-display: clamp(2.6rem, 5.8vw, 5.6rem);
  --qasda-type-h1: clamp(2.25rem, 4.4vw, 4.25rem);
  --qasda-type-h2: clamp(1.75rem, 3vw, 3rem);
  --qasda-type-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --qasda-type-body-lg: clamp(1rem, 1.3vw, 1.2rem);
  --qasda-type-body: 1rem;
  --qasda-type-body-sm: 0.875rem;
  --qasda-type-caption: 0.75rem;
  --qasda-leading-tight: 1.08;
  --qasda-leading-heading: 1.18;
  --qasda-leading-body: 1.6;
  --qasda-tracking-tight: -0.035em;
  --qasda-tracking-label: 0.08em;

  /* Four-pixel spacing grid */
  --qasda-space-0: 0;
  --qasda-space-1: 0.25rem;
  --qasda-space-2: 0.5rem;
  --qasda-space-3: 0.75rem;
  --qasda-space-4: 1rem;
  --qasda-space-5: 1.25rem;
  --qasda-space-6: 1.5rem;
  --qasda-space-8: 2rem;
  --qasda-space-10: 2.5rem;
  --qasda-space-12: 3rem;
  --qasda-space-16: 4rem;
  --qasda-space-20: 5rem;
  --qasda-space-24: 6rem;

  /* Shape */
  --qasda-radius-xs: 0.375rem;
  --qasda-radius-sm: 0.5rem;
  --qasda-radius-md: 0.75rem;
  --qasda-radius-lg: 1rem;
  --qasda-radius-xl: 1.25rem;
  --qasda-radius-2xl: 1.75rem;
  --qasda-radius-pill: 999px;

  /* Elevation */
  --qasda-shadow-control:
    0 1px 2px rgba(23, 30, 26, 0.05),
    0 8px 24px rgba(23, 30, 26, 0.07);
  --qasda-shadow-raised:
    0 1px 2px rgba(23, 30, 26, 0.06),
    0 12px 32px rgba(23, 30, 26, 0.1);
  --qasda-shadow-float: 0 18px 55px rgba(23, 30, 26, 0.14);
  --qasda-focus: 0 0 0 4px rgba(17, 185, 154, 0.18);

  /* Layout */
  --qasda-container: 96rem;
  --qasda-content: 76rem;
  --qasda-gutter: clamp(1rem, 3vw, 3rem);
  --qasda-control-height: 3.5rem;
  --qasda-header-height: 5rem;

  /* Texture */
  --qasda-dot-field:
    radial-gradient(circle, rgba(35, 37, 34, 0.075) 1px, transparent 1.1px);

  /* Motion */
  --qasda-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --qasda-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --qasda-duration-fast: 140ms;
  --qasda-duration-base: 220ms;
  --qasda-duration-slow: 420ms;
  --qasda-duration-reveal: 720ms;

  /* Short aliases retained for existing Qasda component rules */
  --qasda-red: var(--qasda-danger);
  --qasda-red-soft: var(--qasda-danger-soft);
  --qasda-ease: var(--qasda-ease-standard);

  /* Layering */
  --qasda-z-base: 0;
  --qasda-z-raised: 10;
  --qasda-z-dropdown: 100;
  --qasda-z-sticky: 200;
  --qasda-z-toast: 400;

  /*
   * Compatibility aliases
   * The current JavaScript and structural CSS use these names. New work
   * should use the --qasda-* semantic tokens above.
   */
  --blue: var(--qasda-green);
  --blue-dk: var(--qasda-green-dark);
  --blue-lt: var(--qasda-green-soft);
  --blue-mid: #c7eee5;
  --green: var(--qasda-success);
  --green-lt: var(--qasda-success-soft);
  --red: var(--qasda-danger);
  --red-lt: var(--qasda-danger-soft);
  --bg: var(--qasda-surface);
  --surface: var(--qasda-canvas);
  --surface-2: var(--qasda-surface-soft);
  --border: var(--qasda-line);
  --border-dk: var(--qasda-line-strong);
  --text: var(--qasda-ink);
  --text-2: var(--qasda-ink-soft);
  --text-3: var(--qasda-muted);
  --text-4: #aeb3ac;
  --r-sm: var(--qasda-radius-sm);
  --r-md: var(--qasda-radius-md);
  --r-lg: var(--qasda-radius-lg);
  --r-xl: var(--qasda-radius-xl);
  --r-pill: var(--qasda-radius-pill);
  --elev-1: var(--qasda-shadow-control);
  --elev-2: var(--qasda-shadow-raised);
  --elev-3: var(--qasda-shadow-float);
  --t: var(--qasda-duration-base) var(--qasda-ease-standard);
}