initial commit

2026-09-11 02:46:56 +02:00
commit 20b384039c
288 changed files with 46557 additions and 0 deletions
@@ -0,0 +1,88 @@
+/* ============================================================================
+   SHARP-ER - stylesheet entry
+   ----------------------------------------------------------------------------
+   Load order matters:
+     1. tailwindcss      - preflight + the utility engine
+     2. primitives.css   - TIER 1, raw scales in a @theme block
+     3. semantic.css     - TIER 2, roles that alias tier 1, per surface
+     4. typography.css   - type roles + @font-face + the EN/AR font switch
+
+   See ./styles/README.md for the rules components have to follow.
+   ========================================================================= */
+
+@import "tailwindcss";
+@import "./styles/primitives.css";
+@import "./styles/semantic.css";
+@import "./styles/typography.css";
+
+/* ---------------------------------------------------------------------------
+   DIRECTION VARIANTS
+   The site is served at /en/* (LTR) and /ar/* (RTL) and lays out with logical
+   properties, so these are only for the rare case that genuinely cannot be
+   expressed logically (an asymmetric icon, a background position).
+   ------------------------------------------------------------------------ */
+@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *));
+@custom-variant ltr (&:where([dir="ltr"], [dir="ltr"] *));
+
+@layer base {
+  /* Every surface paints itself, so <footer data-surface="light"> inside a
+     dark page is complete on its own. :root defaults to the dark surface. */
+  html,
+  body,
+  [data-surface] {
+    background-color: var(--surface-page);
+    color: var(--text-primary);
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    /* Tier-2 only, like everything else: --type-body-base-* is the semantic
+       alias of the Body/Medium role (16/24) and lives in semantic.css. */
+    font-size: var(--type-body-base-size);
+    line-height: var(--type-body-base-leading);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: start;
+  }
+
+  ::selection {
+    background-color: var(--surface-selection);
+    color: var(--text-primary);
+  }
+
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  /* Headings inherit the heading family; size comes from a type role utility
+     so that an <h2> used as a card title can still be body-lg-bold. */
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-heading);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  ::placeholder {
+    color: var(--field-placeholder);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}