From dcffa87be766cc08549bfef130225474631355f3 Mon Sep 17 00:00:00 2001
From: MohFarawati <mf@planetmutlu.com>
Date: Tue, 14 Jul 2026 22:08:34 +0200
Subject: [PATCH] feat(design-system): add type scale, spacing rhythm and font
 tokens

Apply the Phase 2 warm-premium base additively (no existing page changes):
- tailwind.config.ts: add fontSize roles (display, h1, h2, h3, title, body-lg,
  body, small, caption, overline) with line-height/tracking/weight; add
  fontFamily (sans/latin = Museo, arabic = Dubai); add section-sm/section-lg
  spacing rhythm.
- globals.css: add Arabic-safe .eyebrow utility (uppercase + tracking on Latin,
  neutralised for html[lang="ar"]).

Colors and fonts unchanged. Verified: tsc clean, eslint clean, tailwind build
generates the new utilities with correct values.
---
 app/globals.css    | 12 ++++++++++++
 tailwind.config.ts | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/app/globals.css b/app/globals.css
index fc48b58..0b49321 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -168,6 +168,18 @@ html[lang="ar"] {
   font-family: var(--font-dubai), sans-serif;
 }
 
+/* Eyebrow / overline label. Latin gets uppercase + tracking; Arabic keeps
+   normal case and spacing so joined letterforms are not broken. */
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+html[lang="ar"] .eyebrow {
+  text-transform: none;
+  letter-spacing: normal;
+}
+
 @layer base {
   * {
     @apply border-border;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 697dd75..1661a25 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,6 +74,23 @@ const config: Config = {
           ring: "hsl(var(--sidebar-ring))",
         },
       },
+      fontFamily: {
+        sans: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
+        latin: ["var(--font-museo)", "Arial", "Helvetica", "sans-serif"],
+        arabic: ["var(--font-dubai)", "Tahoma", "Arial", "sans-serif"],
+      },
+      fontSize: {
+        display: ["clamp(2.75rem, 8vw, 5.5rem)", { lineHeight: "0.95", letterSpacing: "-0.03em", fontWeight: "900" }],
+        h1: ["clamp(2.25rem, 5vw, 3.5rem)", { lineHeight: "1.05", letterSpacing: "-0.02em", fontWeight: "700" }],
+        h2: ["clamp(1.75rem, 3.5vw, 2.5rem)", { lineHeight: "1.1", letterSpacing: "-0.015em", fontWeight: "700" }],
+        h3: ["1.375rem", { lineHeight: "1.2", letterSpacing: "-0.01em", fontWeight: "700" }],
+        title: ["1.125rem", { lineHeight: "1.3", fontWeight: "500" }],
+        "body-lg": ["1.125rem", { lineHeight: "1.7", fontWeight: "400" }],
+        body: ["1rem", { lineHeight: "1.7", fontWeight: "400" }],
+        small: ["0.875rem", { lineHeight: "1.6" }],
+        caption: ["0.8125rem", { lineHeight: "1.5", fontWeight: "500" }],
+        overline: ["0.75rem", { lineHeight: "1.4", letterSpacing: "0.14em", fontWeight: "500" }],
+      },
       borderRadius: {
         sm: "var(--radius-nested)",
         md: "var(--radius-nested)",
@@ -106,6 +123,8 @@ const config: Config = {
       },
       spacing: {
         section: "var(--section-space)",
+        "section-sm": "3rem",
+        "section-lg": "8rem",
         content: "var(--content-space)",
       },
       backdropBlur: {