@import "../src/styles/tokens.css"; @import "tailwindcss"; /* ── Base resets ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 14px; /* `dir` is now set on in app/layout.tsx (lang="ar" dir="rtl"). Tailwind v4 ships native `rtl:` / `ltr:` variants that key off this attribute, so utility classes like `rtl:flex-row-reverse` work without a plugin. Route groups no longer need to set `dir` individually — see report Section 1. */ } body { margin: 0; min-height: 100vh; background-color: var(--color-surface-sunken); color: var(--color-text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Tailwind theme bridge ──────────────────────────── */ /* Expose CSS variables as Tailwind color utilities. */ @theme inline { --color-primary-*: initial; --color-sand-*: initial; --color-gold-*: initial; --color-slate-*: initial; --color-primary-50: var(--color-primary-50); --color-primary-100: var(--color-primary-100); --color-primary-200: var(--color-primary-200); --color-primary-300: var(--color-primary-300); --color-primary-400: var(--color-primary-400); --color-primary-500: var(--color-primary-500); --color-primary-600: var(--color-primary-600); --color-primary-700: var(--color-primary-700); --color-primary-800: var(--color-primary-800); --color-primary-900: var(--color-primary-900); --color-sand-50: var(--color-sand-50); --color-sand-100: var(--color-sand-100); --color-sand-200: var(--color-sand-200); --color-sand-300: var(--color-sand-300); --color-sand-400: var(--color-sand-400); --color-sand-500: var(--color-sand-500); --color-sand-600: var(--color-sand-600); --color-sand-700: var(--color-sand-700); --color-sand-800: var(--color-sand-800); --color-sand-900: var(--color-sand-900); --color-gold-50: var(--color-gold-50); --color-gold-100: var(--color-gold-100); --color-gold-200: var(--color-gold-200); --color-gold-300: var(--color-gold-300); --color-gold-400: var(--color-gold-400); --color-gold-500: var(--color-gold-500); --color-gold-600: var(--color-gold-600); --color-gold-700: var(--color-gold-700); --color-gold-800: var(--color-gold-800); --color-gold-900: var(--color-gold-900); --color-slate-50: var(--color-slate-50); --color-slate-100: var(--color-slate-100); --color-slate-200: var(--color-slate-200); --color-slate-300: var(--color-slate-300); --color-slate-400: var(--color-slate-400); --color-slate-500: var(--color-slate-500); --color-slate-600: var(--color-slate-600); --color-slate-700: var(--color-slate-700); --color-slate-800: var(--color-slate-800); --color-slate-900: var(--color-slate-900); --color-background: var(--color-sand-50); --color-foreground: var(--color-slate-900); --color-brand: var(--color-primary-500); --font-sans: var(--font-sans); --font-mono: var(--font-mono); } /* ── Focus ring utility ─────────────────────────────── */ /* Unchanged: box-shadow rings are direction-neutral. */ .focus-ring { outline: none; box-shadow: 0 0 0 2px var(--color-brand-600); } /* ── RTL icon mirroring ───────────────────────────────── Directional glyphs (chevrons, arrows, "back") need to visually point the opposite way in RTL even though the underlying icon font glyph doesn't change. Apply .icon-flip-rtl to any / whose meaning is "forward"/"back" rather than purely decorative. */ [dir="rtl"] .icon-flip-rtl { transform: scaleX(-1); }