/**
 * Complete Design System Tokens
 * Names of Allah PWA - Usul.ai inspired + deep dusky teal
 */

:root {
  /* === BACKGROUNDS === */
  --bg-page: #FDFCF9;
  --bg-card: #FFFFFF;
  --bg-subtle: #F8F6F2;
  --bg-hover: #F4F2ED;

  /* === TEXT === */
  --text-primary: #1A1A1A;
  --text-secondary: #3A3A3A;
  --text-tertiary: #6A6A6A;
  --text-quaternary: #9A9A9A;

  /* === TEAL PALETTE === */
  --teal-50: #F0F9F8;
  --teal-100: #D4EFEC;
  --teal-200: #A8DFD9;
  --teal-300: #7FBDB6;
  --teal-400: #5BA39B;
  --teal-500: #3A7872;
  --teal-600: #2A5F5C;
  --teal-700: #1C4644;
  --teal-800: #143432;
  --teal-900: #0D2422;

  /* === GOLD ACCENTS === */
  --gold-50: #FAF6ED;
  --gold-100: #F5EFE0;
  --gold-200: #E8D9B8;
  --gold-300: #D9C291;
  --gold-400: #C9A961;
  --gold-500: #B8935E;
  --gold-600: #9A7B4E;
  --gold-dark: #B8860B;
  --gold: #D4AF37;
  --gold-light: #E8D5A0;
  --gold-softest: #FAF6ED;

  /* === SEMANTIC COLORS === */
  --border-subtle: #E8E5E0;
  --border-default: #D4D1CC;
  --border-strong: #B8B5B0;
  --border-light: rgba(42, 95, 92, 0.12);

  --shadow-color-sm: rgba(26, 70, 68, 0.04);
  --shadow-color-md: rgba(26, 70, 68, 0.08);
  --shadow-color-lg: rgba(26, 70, 68, 0.12);
  --shadow-color-xl: rgba(26, 70, 68, 0.16);

  /* === FEEDBACK COLORS === */
  --success: #2D7A5F;
  --error: #B85C5C;
  --warning: #B88F5C;
  --info: var(--teal-600);

  /* === ASSESSMENT COLORS === */
  --red: #DC2626;
  --red-light: #FCA5A5;
  --red-softest: #FEE2E2;
  --orange: #EA580C;
  --orange-light: #FDBA74;
  --orange-softest: #FFEDD5;
  --green: #059669;
  --green-light: #6EE7B7;
  --green-softest: #D1FAE5;

  /* === FONT FAMILIES === */
  --font-arabic: "Scheherazade New", "Amiri", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  /* === TYPE SCALE === */
  --text-display-2xl: clamp(4rem, 10vw, 6rem);
  --text-display-xl: clamp(3.5rem, 8vw, 5rem);
  --text-display-lg: clamp(3rem, 6vw, 4rem);

  --text-h1: clamp(2.25rem, 5vw, 3rem);
  --text-h2: clamp(1.875rem, 4vw, 2.25rem);
  --text-h3: clamp(1.5rem, 3vw, 1.875rem);
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;

  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --text-arabic-hero: clamp(5rem, 14vw, 9rem);
  --text-arabic-display: clamp(3.5rem, 10vw, 6rem);
  --text-arabic-large: clamp(2.5rem, 6vw, 4rem);
  --text-arabic-medium: clamp(1.75rem, 4vw, 2.5rem);
  --text-arabic-base: 1.5rem;

  /* === FONT WEIGHTS === */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* === LINE HEIGHTS === */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-arabic: 1.4;

  /* === LETTER SPACING === */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-caps: 0.05em;

  /* === SPACING SCALE === */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --space-section-sm: var(--space-12);
  --space-section-md: var(--space-16);
  --space-section-lg: var(--space-24);
  --space-section-xl: var(--space-32);

  --space-card-sm: var(--space-4);
  --space-card-md: var(--space-6);
  --space-card-lg: var(--space-8);
  --space-card-xl: var(--space-12);

  /* === BORDERS & RADII === */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  --border-radius-none: 0;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-2xl: 1.25rem;
  --border-radius-3xl: 1.5rem;
  --border-radius-full: 9999px;

  --radius-button: var(--border-radius-lg);
  --radius-card: var(--border-radius-xl);
  --radius-modal: var(--border-radius-2xl);
  --radius-input: var(--border-radius-md);

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px 0 var(--shadow-color-sm);
  --shadow-sm: 0 1px 3px 0 var(--shadow-color-sm), 0 1px 2px -1px var(--shadow-color-sm);
  --shadow-md: 0 4px 6px -1px var(--shadow-color-md), 0 2px 4px -2px var(--shadow-color-md);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color-lg), 0 4px 6px -4px var(--shadow-color-lg);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color-xl), 0 8px 10px -6px var(--shadow-color-xl);
  --shadow-2xl: 0 25px 50px -12px var(--shadow-color-xl);

  --shadow-button: var(--shadow-sm);
  --shadow-button-hover: var(--shadow-md);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-modal: var(--shadow-2xl);

  /* === MOTION === */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-default: all var(--duration-normal) var(--ease-in-out);
  --transition-fast: all var(--duration-fast) var(--ease-in-out);
  --transition-slow: all var(--duration-slow) var(--ease-in-out);

  /* === LAYOUT === */
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  --container-text: var(--container-2xl);
  --container-content: var(--container-5xl);
  --container-wide: var(--container-7xl);

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-tooltip: 1600;

  /* === SEMANTIC DARK-MODE TOKENS (override per theme) === */
  --color-arabic-card:   var(--teal-700);   /* Arabic on browse cards */
  --color-section-title: var(--teal-700);   /* Section headings in modal */
  --bg-proof-block:      var(--teal-50);    /* Evidence blockquote bg */

  /* === LEGACY ALIASES (transition period) === */
  --paper: var(--bg-page);
  --ink: var(--text-primary);
  --ink-medium: var(--text-secondary);
  --ink-light: var(--text-tertiary);
  --ink-muted: var(--text-quaternary);
  --accent: var(--teal-500);
  --accent-soft: var(--teal-100);
  --accent-hover: var(--teal-700);
  --border: var(--border-subtle);
  --card-radius: var(--radius-card);
  --button-radius: var(--radius-button);
  --modal-radius: var(--radius-modal);
  --max-width: var(--container-wide);
  --max-width-wide: var(--container-wide);
  --font-body: var(--font-ui);

  --s-xs: var(--space-2);
  --s-sm: var(--space-4);
  --s-md: var(--space-6);
  --s-lg: var(--space-8);
  --s-xl: var(--space-12);
  --s-2xl: var(--space-16);
  --s-3xl: var(--space-24);

  /* Convenience aliases used by refinement briefs */
  --teal-dark: var(--teal-600);
  --teal-light: var(--teal-300);
  --teal-darker: var(--teal-700);
  --teal-softest: var(--teal-100);
}

/* ============================================================
   DARK MODE
   Applied when: system prefers dark, OR user toggled dark.
   Override: data-theme="light" always forces light mode.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Warmer, lighter backgrounds — less gloomy */
    --bg-page:    #1E2D2B;
    --bg-card:    #263532;
    --bg-subtle:  #1B2927;
    --bg-hover:   #2F4440;

    --text-primary:    #F2EFE9;
    --text-secondary:  #CCC8C2;
    --text-tertiary:   #948F88;
    --text-quaternary: #636059;

    --border-subtle:  rgba(255,255,255,0.09);
    --border-default: rgba(255,255,255,0.14);
    --border-strong:  rgba(255,255,255,0.22);
    --border-light:   rgba(255,255,255,0.07);

    --shadow-color-sm: rgba(0,0,0,0.18);
    --shadow-color-md: rgba(0,0,0,0.28);
    --shadow-color-lg: rgba(0,0,0,0.40);
    --shadow-color-xl: rgba(0,0,0,0.52);

    --teal-50:  rgba(107, 181, 173, 0.08);
    --teal-100: rgba(107, 181, 173, 0.15);
    --teal-500: #6BB5AD;
    --teal-600: #56A09A;
    --teal-700: #3D8580;
    --accent:   var(--teal-500);

    --gold-50:    rgba(212, 175, 55, 0.07);
    --gold-light: rgba(212, 175, 55, 0.22);

    /* Semantic overrides for dark mode legibility */
    --color-arabic-card:   var(--gold-400);
    --color-section-title: var(--teal-500);
    --bg-proof-block:      rgba(255,255,255,0.05);
  }
}

[data-theme="dark"] {
  /* Warmer, lighter backgrounds — less gloomy */
  --bg-page:    #1E2D2B;
  --bg-card:    #263532;
  --bg-subtle:  #1B2927;
  --bg-hover:   #2F4440;

  --text-primary:    #F2EFE9;
  --text-secondary:  #CCC8C2;
  --text-tertiary:   #948F88;
  --text-quaternary: #636059;

  --border-subtle:  rgba(255,255,255,0.09);
  --border-default: rgba(255,255,255,0.14);
  --border-strong:  rgba(255,255,255,0.22);
  --border-light:   rgba(255,255,255,0.07);

  --shadow-color-sm: rgba(0,0,0,0.18);
  --shadow-color-md: rgba(0,0,0,0.28);
  --shadow-color-lg: rgba(0,0,0,0.40);
  --shadow-color-xl: rgba(0,0,0,0.52);

  --teal-50:  rgba(107, 181, 173, 0.08);
  --teal-100: rgba(107, 181, 173, 0.15);
  --teal-500: #6BB5AD;
  --teal-600: #56A09A;
  --teal-700: #3D8580;
  --accent:   var(--teal-500);

  --gold-50:    rgba(212, 175, 55, 0.07);
  --gold-light: rgba(212, 175, 55, 0.22);

  /* Semantic overrides for dark mode legibility */
  --color-arabic-card:   var(--gold-400);
  --color-section-title: var(--teal-500);
  --bg-proof-block:      rgba(255,255,255,0.05);
}