/* DR!P design tokens: semantic colors, type, spacing, motion, and layers. */
:root {
  color-scheme: light;

  --sf-bg: #f3ede0;
  --sf-bg-2: #e9dfc9;
  --sf-surface: #fffaf0;
  --sf-ink: #1e1a14;
  --sf-ink-muted: #7a7266;
  --sf-line: #ddd0b3;
  --sf-line-strong: #c8b68e;
  --sf-dark: #1a1611;
  --sf-dark-2: #241f18;
  --sf-dark-line: #3a3327;
  --sf-copper: #a9713c;
  --sf-copper-deep: #7c4f27;
  --sf-copper-soft: #d9b88c;
  --sf-rust: #a3232b;
  --sf-rust-deep: #7c1a20;
  --sf-green: #3f6b3f;

  --ad-bg: #0f1115;
  --ad-bg-grad: radial-gradient(ellipse at top, rgba(209, 160, 117, .04), transparent 50%);
  --ad-panel: #161920;
  --ad-panel-2: #1c1f28;
  --ad-elevated: #232730;
  --ad-hover: #262a35;
  --ad-line: #262a35;
  --ad-line-soft: #323745;
  --ad-line-strong: #3d4353;
  --ad-text: #e8e9ec;
  --ad-text-dim: #9095a1;
  --ad-text-mute: #858b98;
  --ad-accent: #d1a075;
  --ad-accent-hi: #e6b88e;
  --ad-accent-bg: rgba(209, 160, 117, .10);
  --ad-accent-bg-2: rgba(209, 160, 117, .18);
  --ad-success: #6dab78;
  --ad-success-bg: rgba(109, 171, 120, .12);
  --ad-warn: #d4a656;
  --ad-warn-bg: rgba(212, 166, 86, .12);
  --ad-danger: #d16168;
  --ad-danger-bg: rgba(209, 97, 104, .12);
  --ad-info: #6d97c9;
  --ad-info-bg: rgba(109, 151, 201, .12);
  --ad-neutral: #9095a1;
  --ad-font-en: 'Inter', 'Segoe UI', Arial, sans-serif;
  --ad-color-scheme: dark;

  --paper: var(--sf-bg);
  --paper-2: var(--sf-bg-2);
  --white: var(--sf-surface);
  --ink: var(--sf-ink);
  --muted: var(--sf-ink-muted);
  --line: var(--sf-line);
  --dark: var(--sf-dark);
  --dark-2: var(--sf-dark-2);
  --line-dark: var(--sf-dark-line);
  --copper: var(--sf-copper);
  --copper-deep: var(--sf-copper-deep);
  --copper-soft: var(--sf-copper-soft);
  --rust: var(--sf-rust);
  --rust-deep: var(--sf-rust-deep);
  --green: var(--sf-green);
  --warning: var(--ad-warn);
  --state-success: var(--sf-green);
  --state-warning: var(--ad-warn);
  --state-error: var(--sf-rust-deep);

  --font-ar: 'Cairo', system-ui, sans-serif;
  --font-en: 'Cairo', 'Inter', system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 25px;
  --text-3xl: 31px;
  --text-4xl: 39px;
  --text-5xl: 49px;
  --text-6xl: 61px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .25);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .5);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-6: var(--space-6);
  --sp-8: var(--space-8);
  --sp-12: var(--space-12);
  --sp-16: var(--space-16);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-slow: 360ms;
  --radius: 2px;
  --shadow: 0 18px 40px -22px rgba(26, 22, 17, .35);
  --shadow-raised: 0 20px 48px -22px rgba(26, 22, 17, .48);
  --focus-ring: 2px solid var(--copper-deep);

  --z-base: 0;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 60;
  --z-toast: 80;
  --z-dialog: 100;
}

:root[data-admin-theme='light'] {
  --ad-bg: #f2f4f7;
  --ad-panel: #fff;
  --ad-panel-2: #fff;
  --ad-elevated: #fff;
  --ad-hover: #edf0f4;
  --ad-line: #d8dce4;
  --ad-line-soft: #c3c9d4;
  --ad-line-strong: #c3c9d4;
  --ad-text: #171b24;
  --ad-text-dim: #4f5665;
  --ad-text-mute: #626776;
  --ad-accent: #a9713c;
  --ad-accent-hi: #7c4f27;
  --ad-accent-bg: rgba(169, 113, 60, .10);
  --ad-accent-bg-2: rgba(169, 113, 60, .18);
  --ad-success: #3f6b3f;
  --ad-warn: #9a6815;
  --ad-danger: #a3232b;
  --ad-info: #426d9e;
  --ad-neutral: #626776;
  --ad-color-scheme: light;
}

@media (prefers-contrast: more) {
  :root:not([data-admin-theme='light']) {
    --sf-ink-muted: #51483e;
    --sf-line: #887b68;
    --focus-ring: 3px solid var(--ink);
  }
  :root:not([data-admin-theme='light']) .admin-body {
    --ad-text-dim: #b8becc;
    --ad-text-mute: #969cab;
    --ad-line: #555d6d;
  }
}

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