/*
  Design Foundation
  Phase 0 only: tokens and rules extracted from the approved visual reference.
  This file is intentionally not linked yet, so it does not change any screen.
*/

:root {
  /*
    Typography Tokens
    Arabic-first institutional/editorial hierarchy.
  */
  --df-font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-heading: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-label: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --df-font-metadata: "IBM Plex Mono", "IBM Plex Sans Arabic", Consolas, monospace;
  --df-font-numbers: "IBM Plex Mono", Consolas, monospace;

  --df-text-body-size: 16px;
  --df-text-body-line: 1.9;
  --df-text-body-weight: 400;

  --df-text-heading-size: clamp(1.5rem, 3vw, 2rem);
  --df-text-heading-line: 1.45;
  --df-text-heading-weight: 600;

  --df-text-label-size: 0.82rem;
  --df-text-label-line: 1.6;
  --df-text-label-weight: 500;

  --df-text-metadata-size: 0.72rem;
  --df-text-metadata-line: 1.5;
  --df-text-metadata-weight: 500;
  --df-text-metadata-letter-spacing: 0.12em;

  --df-text-number-size: clamp(2.5rem, 7vw, 4.5rem);
  --df-text-number-line: 1;
  --df-text-number-weight: 500;

  /*
    Color Tokens
    Warm editorial neutrals with restrained semantic accents.
  */
  --df-color-background: #f7f5ef;
  --df-color-surface: #fbfaf6;
  --df-color-surface-muted: #f0ede6;
  --df-color-border: #d7d0c4;
  --df-color-border-strong: #a99f91;
  --df-color-text-primary: #23211f;
  --df-color-text-secondary: #6f6a62;
  --df-color-text-tertiary: #a09a91;
  --df-color-success: #006b5b;
  --df-color-success-surface: #eef6f3;
  --df-color-error: #9b1f24;
  --df-color-error-surface: #f8eeee;
  --df-color-accent: #9a6a05;
  --df-color-accent-surface: #f4ead0;

  /*
    Spacing Tokens
    8pt grid, with 4px only for micro relationships.
  */
  --df-space-0: 0;
  --df-space-1: 4px;
  --df-space-2: 8px;
  --df-space-3: 12px;
  --df-space-4: 16px;
  --df-space-5: 24px;
  --df-space-6: 32px;
  --df-space-7: 40px;
  --df-space-8: 48px;
  --df-space-10: 64px;
  --df-space-12: 80px;

  --df-section-gap: var(--df-space-10);
  --df-block-gap: var(--df-space-6);
  --df-row-gap: var(--df-space-4);
  --df-inset-compact: var(--df-space-4);
  --df-inset-default: var(--df-space-5);
  --df-inset-loose: var(--df-space-6);

  /*
    Border Tokens
    Borders replace decorative shadows. Radius remains restrained.
  */
  --df-border-width: 1px;
  --df-border-width-strong: 2px;
  --df-border-style: solid;
  --df-border: var(--df-border-width) var(--df-border-style) var(--df-color-border);
  --df-border-strong: var(--df-border-width-strong) var(--df-border-style) var(--df-color-text-primary);
  --df-radius-0: 0;
  --df-radius-1: 2px;
  --df-radius-2: 4px;
  --df-radius-3: 6px;
  --df-radius-4: 8px;
  --df-divider: var(--df-border-width) solid color-mix(in srgb, var(--df-color-border) 72%, transparent);
  --df-divider-strong: var(--df-border-width) solid var(--df-color-border-strong);
  --df-accent-rule-width: 3px;

  /*
    Motion Rules
    Quiet state changes only. No bounce, no celebration, no hover lift.
  */
  --df-motion-duration-fast: 120ms;
  --df-motion-duration-base: 180ms;
  --df-motion-duration-slow: 240ms;
  --df-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --df-transition-color: color var(--df-motion-duration-base) var(--df-motion-ease),
    background-color var(--df-motion-duration-base) var(--df-motion-ease),
    border-color var(--df-motion-duration-base) var(--df-motion-ease);
  --df-transition-state: opacity var(--df-motion-duration-base) var(--df-motion-ease),
    visibility var(--df-motion-duration-base) var(--df-motion-ease);
  --df-hover-background: color-mix(in srgb, var(--df-color-surface-muted) 72%, #fff);
  --df-hover-border: var(--df-color-border-strong);
  --df-focus-outline: 2px solid var(--df-color-text-primary);
  --df-focus-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --df-motion-duration-fast: 1ms;
    --df-motion-duration-base: 1ms;
    --df-motion-duration-slow: 1ms;
  }
}