/* =============================================================================
   MSSID Design System — Tokens
   Drop-in for Tailwind CSS 4 (@theme) and plain CSS-variable consumers.
   Import once at app root (apps/web/app/layout.tsx) before any component CSS.
   ============================================================================= */

@import url("./fonts/fonts.css");
@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Reem+Kufi:wght@400;500;600;700&display=swap");

/* -------------------------------------------------------------------------- *
 * Tailwind 4 @theme block — these become tw utilities (bg-primary-900, etc). *
 * The SAME tokens are mirrored into :root below so vanilla CSS / non-Tailwind *
 * consumers (like our preview cards and UI kits) can read them directly.     *
 * Light-mode values; dark mode is declared below via [data-theme="dark"].    *
 * -------------------------------------------------------------------------- */
@theme {
  /* ---- Fonts ---- */
  --font-arabic: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI Arabic",
    "Noto Sans Arabic", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, Segoe UI,
    sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Color: primary (Kaaba Indigo) ---- */
  --color-primary-50:  #EDEFF6;
  --color-primary-100: #D6DBEB;
  --color-primary-200: #AAB3D4;
  --color-primary-300: #7A87B8;
  --color-primary-400: #4F5E99;
  --color-primary-500: #323F7A;
  --color-primary-600: #28346A;
  --color-primary-700: #222E5F;
  --color-primary-800: #1E2A56;   /* brand hero */
  --color-primary-900: #151E42;
  --color-primary-950: #0C122C;

  /* ---- Color: secondary (Damascus Teal) ---- */
  --color-teal-50:  #E6F0F2;
  --color-teal-100: #C7DDE1;
  --color-teal-200: #8EBAC2;
  --color-teal-300: #5A98A3;
  --color-teal-400: #2E7683;
  --color-teal-500: #15606E;
  --color-teal-600: #0F4C5C;      /* brand secondary */
  --color-teal-700: #0C3E4B;
  --color-teal-800: #09303A;
  --color-teal-900: #061F26;

  /* ---- Color: accent (Saffron) ---- */
  --color-saffron-50:  #FBF3E6;
  --color-saffron-100: #F6E4C5;
  --color-saffron-200: #ECC98B;
  --color-saffron-300: #E3B25A;
  --color-saffron-400: #D9933F;   /* brand accent */
  --color-saffron-500: #BB7A2B;
  --color-saffron-600: #95601F;
  --color-saffron-700: #6F4716;

  /* ---- Color: destructive (Pomegranate) ---- */
  --color-pomegranate-50:  #F4E6E8;
  --color-pomegranate-100: #E5C2C7;
  --color-pomegranate-300: #B86570;
  --color-pomegranate-500: #7E2F3A;  /* brand destructive */
  --color-pomegranate-700: #5A1F28;
  --color-pomegranate-900: #3A141A;

  /* ---- Color: neutrals (warm, tilted toward parchment) ---- */
  --color-parchment:        #F5EFE3;  /* light canvas */
  --color-parchment-sunk:   #EDE5D3;  /* inputs / pressed surfaces */
  --color-parchment-raised: #FBF7EC;  /* surface-1 */
  --color-ink:              #0E1117;  /* dark canvas */
  --color-ink-raised:       #151922;  /* dark surface-1 */
  --color-ink-sunk:         #0A0D13;  /* dark inputs */

  --color-neutral-50:  #FAF6ED;
  --color-neutral-100: #EFE8D9;
  --color-neutral-200: #DCD3BE;
  --color-neutral-300: #B8AE94;
  --color-neutral-400: #8C836C;
  --color-neutral-500: #605945;
  --color-neutral-600: #463F30;
  --color-neutral-700: #302B20;
  --color-neutral-800: #201D15;
  --color-neutral-900: #12110C;

  /* ---- Semantic ---- */
  --color-success: #2E7D5E;
  --color-warning: #BB7A2B;
  --color-danger:  #7E2F3A;
  --color-info:    #15606E;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Shadows (warm, desaturated) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 15, 8, 0.04);
  --shadow-sm: 0 2px 4px rgba(20, 15, 8, 0.05), 0 1px 2px rgba(20, 15, 8, 0.04);
  --shadow-md: 0 6px 14px rgba(20, 15, 8, 0.06), 0 2px 4px rgba(20, 15, 8, 0.04);
  --shadow-lg: 0 16px 32px rgba(20, 15, 8, 0.08), 0 4px 8px rgba(20, 15, 8, 0.05);
  --shadow-xl: 0 28px 56px rgba(20, 15, 8, 0.12);
  --shadow-focus: 0 0 0 2px var(--color-parchment), 0 0 0 4px var(--color-saffron-400);

  /* ---- Spacing (4px grid) — Tailwind already exposes these; here for raw CSS ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-micro:    150ms;
  --duration-standard: 220ms;
  --duration-reveal:   400ms;
}

/* -------------------------------------------------------------------------- *
 * :root mirror of the @theme tokens. Required so non-Tailwind consumers      *
 * (our preview cards, UI kit HTML) can read the palette directly. In a real  *
 * Tailwind 4 build the @theme block already exposes these at :root; this     *
 * duplicate is idempotent and only activates outside the Tailwind pipeline.  *
 * -------------------------------------------------------------------------- */
:root {
  --font-arabic: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI Arabic", "Noto Sans Arabic", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --color-primary-50:  #EDEFF6; --color-primary-100: #D6DBEB; --color-primary-200: #AAB3D4;
  --color-primary-300: #7A87B8; --color-primary-400: #4F5E99; --color-primary-500: #323F7A;
  --color-primary-600: #28346A; --color-primary-700: #222E5F; --color-primary-800: #1E2A56;
  --color-primary-900: #151E42; --color-primary-950: #0C122C;

  --color-teal-50:  #E6F0F2; --color-teal-100: #C7DDE1; --color-teal-200: #8EBAC2;
  --color-teal-300: #5A98A3; --color-teal-400: #2E7683; --color-teal-500: #15606E;
  --color-teal-600: #0F4C5C; --color-teal-700: #0C3E4B; --color-teal-800: #09303A;
  --color-teal-900: #061F26;

  --color-saffron-50:  #FBF3E6; --color-saffron-100: #F6E4C5; --color-saffron-200: #ECC98B;
  --color-saffron-300: #E3B25A; --color-saffron-400: #D9933F; --color-saffron-500: #BB7A2B;
  --color-saffron-600: #95601F; --color-saffron-700: #6F4716;

  --color-pomegranate-50: #F4E6E8; --color-pomegranate-100: #E5C2C7;
  --color-pomegranate-300: #B86570; --color-pomegranate-500: #7E2F3A;
  --color-pomegranate-700: #5A1F28; --color-pomegranate-900: #3A141A;

  --color-parchment: #F5EFE3; --color-parchment-sunk: #EDE5D3; --color-parchment-raised: #FBF7EC;
  --color-ink: #0E1117; --color-ink-raised: #151922; --color-ink-sunk: #0A0D13;

  --color-neutral-50: #FAF6ED; --color-neutral-100: #EFE8D9; --color-neutral-200: #DCD3BE;
  --color-neutral-300: #B8AE94; --color-neutral-400: #8C836C; --color-neutral-500: #605945;
  --color-neutral-600: #463F30; --color-neutral-700: #302B20; --color-neutral-800: #201D15;
  --color-neutral-900: #12110C;

  --color-success: #2E7D5E; --color-warning: #BB7A2B; --color-danger: #7E2F3A; --color-info: #15606E;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 15, 8, 0.04);
  --shadow-sm: 0 2px 4px rgba(20, 15, 8, 0.05), 0 1px 2px rgba(20, 15, 8, 0.04);
  --shadow-md: 0 6px 14px rgba(20, 15, 8, 0.06), 0 2px 4px rgba(20, 15, 8, 0.04);
  --shadow-lg: 0 16px 32px rgba(20, 15, 8, 0.08), 0 4px 8px rgba(20, 15, 8, 0.05);
  --shadow-xl: 0 28px 56px rgba(20, 15, 8, 0.12);
  --shadow-focus: 0 0 0 2px var(--color-parchment), 0 0 0 4px var(--color-saffron-400);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-micro: 150ms; --duration-standard: 220ms; --duration-reveal: 400ms;
}

/* -------------------------------------------------------------------------- *
 * Semantic mode tokens — derived from the palette above.                     *
 * Components consume these, not the raw palette.                             *
 * -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --canvas:              var(--color-parchment);
  --canvas-sunk:         var(--color-parchment-sunk);
  --surface-1:           var(--color-parchment-raised);
  --surface-2:           #FFFDF6;
  --fg-1:                #1A1710;   /* primary text */
  --fg-2:                #4A4434;   /* secondary text */
  --fg-3:                #7A725C;   /* tertiary / placeholder */
  --fg-on-primary:       #FBF7EC;
  --fg-on-accent:        #2A1E0A;
  --border-subtle:       #E0D6BF;
  --border-default:      #CEC1A4;
  --border-strong:       #8C836C;
  --ring-focus:          var(--color-saffron-400);

  --primary:             var(--color-primary-800);
  --primary-hover:       var(--color-primary-900);
  --primary-pressed:     var(--color-primary-950);
  --secondary:           var(--color-teal-600);
  --secondary-hover:     var(--color-teal-700);
  --accent:              var(--color-saffron-400);
  --accent-hover:        var(--color-saffron-500);
  --destructive:         var(--color-pomegranate-500);
  --destructive-hover:   var(--color-pomegranate-700);

  --motif-opacity: 0.06;
  --motif-color:   var(--color-primary-800);
}

[data-theme="dark"] {
  --canvas:              var(--color-ink);
  --canvas-sunk:         var(--color-ink-sunk);
  --surface-1:           var(--color-ink-raised);
  --surface-2:           #1C2130;
  --fg-1:                #F0EADB;
  --fg-2:                #B4AC95;
  --fg-3:                #7A725C;
  --fg-on-primary:       #F0EADB;
  --fg-on-accent:        #2A1E0A;
  --border-subtle:       #262C3B;
  --border-default:      #39405A;
  --border-strong:       #5A6380;
  --ring-focus:          var(--color-saffron-300);

  --primary:             var(--color-primary-400);
  --primary-hover:       var(--color-primary-300);
  --primary-pressed:     var(--color-primary-200);
  --secondary:           var(--color-teal-400);
  --secondary-hover:     var(--color-teal-300);
  --accent:              var(--color-saffron-300);
  --accent-hover:        var(--color-saffron-200);
  --destructive:         #B86570;
  --destructive-hover:   #E5C2C7;

  --motif-opacity: 0.06;
  --motif-color:   #FBF7EC;
}

/* -------------------------------------------------------------------------- *
 * Type scale                                                                 *
 * Arabic leads — sized larger and looser-spaced than Latin companions.       *
 * -------------------------------------------------------------------------- */
:root {
  /* Arabic (primary) */
  --text-ar-display:  clamp(44px, 6vw, 88px);
  --text-ar-h1:       clamp(36px, 4.2vw, 56px);
  --text-ar-h2:       clamp(28px, 3vw, 40px);
  --text-ar-h3:       22px;
  --text-ar-h4:       18px;
  --text-ar-body:     17px;
  --text-ar-small:    15px;
  --text-ar-micro:    13px;
  --lh-ar-display:    1.15;
  --lh-ar-body:       1.75;

  /* Latin (companion) */
  --text-display:  clamp(36px, 5vw, 72px);
  --text-h1:       clamp(30px, 3.4vw, 44px);
  --text-h2:       clamp(24px, 2.6vw, 32px);
  --text-h3:       20px;
  --text-h4:       16px;
  --text-body:     15px;
  --text-small:    13px;
  --text-micro:    11px;
  --lh-display:    1.05;
  --lh-body:       1.55;
}

/* -------------------------------------------------------------------------- *
 * Base — these selectors set defaults. Components override locally.          *
 * -------------------------------------------------------------------------- */
html {
  color-scheme: light;
  background: var(--canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"] { color-scheme: dark; }
html[dir="rtl"] { font-family: var(--font-arabic); }

body { background: var(--canvas); color: var(--fg-1); margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: var(--font-arabic);
  font-weight: 600;
  letter-spacing: 0;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-display); }
h2 { font-size: var(--text-h2); line-height: var(--lh-display); }
h3 { font-size: var(--text-h3); line-height: 1.25; }
h4 { font-size: var(--text-h4); line-height: 1.3; font-family: var(--font-sans); font-weight: 600; }

html[dir="rtl"] h1 { font-size: var(--text-ar-h1); line-height: var(--lh-ar-display); }
html[dir="rtl"] h2 { font-size: var(--text-ar-h2); line-height: var(--lh-ar-display); }
html[dir="rtl"] h3 { font-size: var(--text-ar-h3); }
html[dir="rtl"] h4 { font-size: var(--text-ar-h4); }

p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
html[dir="rtl"] p {
  font-size: var(--text-ar-body);
  line-height: var(--lh-ar-body);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--canvas-sunk);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

/* Bilingual hero — Arabic primary over Latin subhead */
.bilingual {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.bilingual-ar { font-family: var(--font-arabic); font-size: var(--text-ar-display); line-height: var(--lh-ar-display); font-weight: 600; color: var(--fg-1); }
.bilingual-latin { font-family: var(--font-display); font-size: calc(var(--text-display) * 0.55); line-height: 1.3; font-weight: 400; color: var(--fg-2); font-style: italic; font-variation-settings: "SOFT" 40, "WONK" 0; }

/* Focus ring — saffron, always */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Selection — parchment on indigo */
::selection { background: var(--color-primary-800); color: var(--color-parchment); }