/* ============================================================================ Hayaanshufiya — design tokens ============================================================================ Three layers. Screens use ONLY layer 2. 1. primitives --orange-600, --sand-200 … raw values, never used directly 2. semantic --color-primary, --color-bg … what components reference 3. component --btn-*, --card-* … per-component overrides Themes ------ Light is the default on bare :root. Dark is redefined three ways so it works whichever signal is present: • .dark the class the existing Tailwind dark: utilities read • [data-theme="dark"] stamped by the site-wide bootstrap in the child theme • prefers-color-scheme for a visitor who has never touched the toggle Why the anchor is #E07818 ------------------------- Five different oranges were in use across the eight interfaces. #E07818 had the widest reach — the student app and the child theme — so the scale is built around it and it sits exactly at step 600. Contrast, measured ------------------ white on orange-600 3.25:1 FAILS AA for text -> never white-on-orange sand-950 on orange-600 5.35:1 passes AA -> dark text on orange orange-700 on white 4.44:1 large text only sand-600 on sand-100 4.42:1 FAILS AA -> not body text sand-700 on sand-100 6.28:1 passes AA -> muted body text sand-500 on sand-100 3.06:1 misses the 3:1 component floor too Measure against sand-100. That is --color-bg, the ground all of these actually sit on. Measuring against sand-50 flattered two of them into this file, and both had to be stepped down once a real page was built. orange-400 on sand-950 7.94:1 passes AA -> the dark-theme accent The primary button therefore carries DARK text, not white. That was already how the app did it; this file makes the reason explicit so it is not "corrected" later into a failing combination. ========================================================================= */ :root { /* ── 1. primitives ─────────────────────────────────────────────────── */ --orange-50: #FFF6EB; --orange-100: #FEE9D2; --orange-200: #FCD3A6; --orange-300: #F8B772; --orange-400: #F29940; --orange-500: #EC8522; --orange-600: #E07818; /* brand anchor */ --orange-700: #BE6313; --orange-800: #964F13; --orange-900: #733D11; --orange-950: #442308; /* One warm neutral replacing the four families that were mixed together: stone (147 uses), zinc (43), gray (21) and slate (40). */ --sand-50: #FBF9F6; --sand-100: #F5F0EB; --sand-200: #E6DED5; --sand-300: #D2C7BC; --sand-400: #B6A89A; --sand-500: #978778; --sand-600: #7B6D60; --sand-700: #62564B; --sand-800: #4C4139; --sand-900: #352D27; --sand-950: #1F1914; /* Status colours, deliberately off the brand hue so "warning" is never mistaken for "primary". Warning sits at 45° — clearly yellower than the brand's 29° — because an orange warning next to an orange button is unreadable as a signal. */ --green-100: #DCEDE2; --green-500: #3F8A5E; --green-600: #33734D; --green-900: #1B3D29; --amber-100: #FCEFC7; --amber-500: #D9A017; --amber-600: #B58212; --amber-900: #5C4008; --red-100: #F7DEDB; --red-500: #C0453A; --red-600: #A33328; --red-900: #571A14; --blue-100: #DDE6F2; --blue-500: #4A6E9C; --blue-600: #3B5980; --blue-900: #1E2E42; /* ── 2. semantic — the only layer screens should reference ─────────── */ --color-primary: var(--orange-600); --color-primary-hover: var(--orange-700); --color-primary-subtle: var(--orange-100); --color-on-primary: var(--sand-950); /* dark: white would fail AA */ --color-bg: var(--sand-100); /* the page ground */ --color-surface: #FFFFFF; /* cards, sheets, menus */ --color-surface-raised: #FFFFFF; --color-surface-sunken: var(--sand-200); --color-text: var(--sand-950); /* היה sand-600, מוצדק בטבלה למעלה במדידה "sand-600 on sand-50 = 4.56:1". אבל --color-bg הוא sand-100 ולא sand-50 — זה הרקע שהטקסט המשני באמת יושב עליו, ושם אותו צמד נמדד 4.42:1, כישלון AA. sand-700 על אותו רקע הוא 6.28:1 ועל משטח לבן 7.11:1. */ --color-text-muted: var(--sand-700); /* היה sand-500, שהוא 3.06:1 על רקע הדף — מחמיץ אפילו את רצפת 3:1 לרכיב ממשק שאינו טקסט. sand-600 הוא 4.42:1: עובר את רצפת 3:1 בנוחות אבל לא את 4.5:1 של טקסט. מציין מקום, מסילת מתג ומשיכת אייקון — לא תווית. */ --color-text-faint: var(--sand-600); --color-text-on-dark: var(--sand-50); --color-border: var(--sand-300); --color-border-soft: var(--sand-200); --color-border-strong: var(--sand-400); --color-success: var(--green-600); --color-success-bg: var(--green-100); --color-warning: var(--amber-600); --color-warning-bg: var(--amber-100); --color-danger: var(--red-600); --color-danger-bg: var(--red-100); --color-info: var(--blue-600); --color-info-bg: var(--blue-100); --color-focus: var(--orange-600); /* ── נוספו בעקבות עבודת הלוחות ──────────────────────────────────────── כל טוקן כאן קיים כי מדידה נכשלה, לא כי מסך רצה עוד צבע. המספרים רשומים כדי שאף אחד מהם לא "יפושט" בחזרה לצמד שהוא החליף. */ --color-primary-deep: var(--orange-800); /* הקובץ הזה מתעד orange-700 על לבן כ‑4.44:1 ומסמן "טקסט גדול בלבד". נמדד מול הרקע האמיתי הוא 4.21:1 — כישלון מלא לטקסט רגיל, וקישורים ופריט הניווט הפעיל השתמשו בו ב‑13‑15px. orange-800 הוא 6.13:1 על לבן ו‑5.20:1 על הגוון העדין. */ --color-success-ink: var(--green-900); --color-warning-ink: var(--amber-900); --color-danger-ink: var(--red-900); --color-info-ink: var(--blue-900); /* צעדי ה‑900. ‎#B58212 על ‎#FCEFC7 נמדד 2.97:1 ומחמיץ את רצפת 3:1 לרכיב ממשק שאינו טקסט, ולכן פקדים בגוון לוקחים את אלה ולא את צעד ה‑600 המשמש לטקסט על רקע הדף. */ --color-on-status: var(--sand-50); /* חזית לטקסט ולאייקונים שיושבים על מילוי סטטוס רווי. */ --color-chart-bar: var(--orange-700); --color-chart-peak: var(--orange-800); /* סימוני גרפים. הכתום יושב באמצע סולם הבהירות ואינו יכול לעבור 3:1 על רקע בהיר, ולכן הסולם הבהיר מכהה והכהה מבהיר. */ --color-on-hero: var(--sand-950); --color-hero-quiet: rgba(31, 25, 20, .88); --color-hero-veil: rgba(31, 25, 20, .14); /* הרצועה הכתומה המוצפת, עם סולם חזית משלה. כהה בשתי הערכות — ראו ‎--color-on-primary למעלה להסבר למה לבן לעולם לא מנצח כאן. */ --shadow-cast: rgba(31, 25, 20, .34); --shadow-contact: rgba(31, 25, 20, .22); --shadow-lift: rgba(31, 25, 20, .38); /* צל מוטל וצל מגע לאיור המשחק המורם, שדורש שלוש שקיפויות נפרדות ולא צל מטושטש אחד. */ /* ── spacing — one 4px-based scale, no free values ─────────────────── */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;--space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ── radius ────────────────────────────────────────────────────────── בפיקסלים ולא ב‑rem. אסטרה מגדירה ‎html { font-size: 91.2% } במתאים־ אישית, ולכן שורש המסמך אינו 16px אלא כ‑14.6px — וכל ערך ב‑rem יוצא קטן בכ‑9% ממה שהלוחות מציינים. ‎--radius-xl היה אמור להיות 24px ורונדר ב‑21.9. רדיוס הוא מידה גיאומטרית של הציור, לא של הטקסט, ואין סיבה שיזוז עם גודל הגופן של המשתמש. ‎--text-* ו‑--space-* נשארים ב‑rem בכוונה: הם כן צריכים לגדול כשהמשתמש מגדיל את גופן הדפדפן. */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ── elevation — warm-tinted, so shadows sit on the sand ground ────── */ --shadow-1: 0 1px 2px rgba(31, 25, 20, .05); --shadow-2: 0 1px 2px rgba(31, 25, 20, .05), 0 4px 12px -4px rgba(31, 25, 20, .12); --shadow-3: 0 1px 3px rgba(31, 25, 20, .06), 0 12px 28px -12px rgba(31, 25, 20, .22); --shadow-glow: 0 6px 22px -8px rgba(224, 120, 24, .55); /* ── typography ────────────────────────────────────────────────────── */ --font-sans: 'Heebo', 'Assistant', system-ui, sans-serif; --font-display: 'Heebo', 'Assistant', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.65; /* ── motion — every duration honours prefers-reduced-motion below ──── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --duration-fast: 120ms; --duration-normal: 240ms; --duration-slow: 400ms; /* ── 3. component ──────────────────────────────────────────────────── */ /* גם אלה בפיקסלים, ומאותה סיבה ועוד אחת: 44px היא רצפה פיזית של WCAG ‎2.5.8, לא יחס. ‎--btn-height נכתב ‎3rem עם הערה שאומרת "48px — מעל רצפת מטרת המגע", ובפועל, מול ‎html:91.2% של אסטרה, הוא רונדר ב‑43.8 — כלומר **מתחת** לרצפה. ההערה תיארה כוונה שהקוד לא קיים, בשקט, בכל כפתור וכל שדה באתר. */ --btn-height: 48px; /* רצפת מטרת המגע היא 44px */ /* ‎44 ולא 40: הלוחות כותבים ‎.btn--sm { min-height: 40px } כברירת מחדל, אבל דורסים ל‑44 בכל מקום שבו הכפתור הוא מטרת מגע אמיתית (‎HomeMobile.dc.html, כפתור הכניסה בכותרת). ‎btn--sm מופיע באתר רק בכותרת ובפעולות משניות — כלומר תמיד כמטרה. */ --btn-height-sm: 44px; --btn-radius: var(--radius-md); --field-height: 48px; --card-radius: var(--radius-xl); --card-padding: var(--space-6); --nav-height: 80px; /* הסרגל התחתון בנייד */ } /* ── dark theme ──────────────────────────────────────────────────────── Only the semantic layer is redefined. Primitives stay put, so a component that reads --color-surface flips automatically and one that reads --sand-200 directly does not — which is exactly why screens must use layer 2 only. */ :root.dark, :root[data-theme="dark"] { --color-primary: var(--orange-500); --color-primary-hover: var(--orange-400); --color-primary-subtle: rgba(224, 120, 24, .16); --color-on-primary: var(--sand-950); --color-bg: #17120E; --color-surface: #211A15; --color-surface-raised: #2A221B; --color-surface-sunken: #120E0B; --color-text: var(--sand-100); --color-text-muted: var(--sand-400); --color-text-faint: var(--sand-500); --color-text-on-dark: var(--sand-50); --color-border: #3A302A; --color-border-soft: #2C241E; --color-border-strong: #4C4039; --color-success: #6BB98C; --color-success-bg: rgba(63, 138, 94, .18); --color-warning: #E0B03F; --color-warning-bg: rgba(217, 160, 23, .18); --color-danger: #E0796C; --color-danger-bg: rgba(192, 69, 58, .18); --color-info: #8AA8CF; --color-info-bg: rgba(74, 110, 156, .18); --color-focus: var(--orange-400); --color-primary-deep: var(--orange-400); /* על הגוונים הכהים הצמדים בהיר‑על‑כהה כבר נמדדים 4.9‑6.1:1, ולכן הפקדים בגוון משתמשים בצבע הסטטוס עצמו. */ --color-success-ink: #6BB98C; --color-warning-ink: #E0B03F; --color-danger-ink: #E0796C; --color-info-ink: #8AA8CF; /* הסטטוסים הכהים הם מילויים בהירים, ולכן הטקסט עליהם כהה. */ --color-on-status: #17120E; --color-chart-bar: var(--orange-500); --color-chart-peak: var(--orange-300); /* בכוונה הערכים הבהירים: הרצועה הכתומה שומרת חזית כהה בשתי הערכות. */ --color-on-hero: var(--sand-950); --color-hero-quiet: rgba(31, 25, 20, .88); --color-hero-veil: rgba(31, 25, 20, .14); --shadow-cast: rgba(0, 0, 0, .55); --shadow-contact: rgba(0, 0, 0, .45); --shadow-lift: rgba(0, 0, 0, .6); --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -4px rgba(0, 0, 0, .55); --shadow-3: 0 1px 3px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(0, 0, 0, .75); --shadow-glow: 0 6px 24px -8px rgba(236, 133, 34, .5); } /* Dark theme is controlled via Settings toggle (.dark or [data-theme="dark"]). Automatic OS prefers-color-scheme override was removed so the site maintains its warm paper and academic clarity by default for all visitors. */ /* ── base ────────────────────────────────────────────────────────────── The app renders inside WordPress, so this is scoped rather than global — it must not restyle wp-admin or the WooCommerce checkout. */ #hayaanshufiya-app, .hayaanshufiya-container { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: var(--leading-normal); } /* Focus must stay visible. Several screens set outline:none on buttons. */ #hayaanshufiya-app :focus-visible, .hayaanshufiya-container :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Digits that line up in columns — scores, timers, XP, unit numbers. */ .tabular, .num, .stat-number, .play-timer, .timer, .drills-timer, [data-tabular], #timer, #games-streak, #games-xp, .ins-score, .ins-bar-value, .ins-spec-value { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; } /* ── Authentic Paper Grain (Tactile Organic Overlay) ────────────────── */ body::before, .hay::before { content: ""; position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99998; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* The games lean on animation heavily. */ @media (prefers-reduced-motion: reduce) { #hayaanshufiya-app *, .hayaanshufiya-container * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }