@import "tailwindcss";

/* =========================================================
   CSS VARIABLES — SINGLE SOURCE OF TRUTH
   (WCAG Compliant + Brand Colors)
========================================================= */
:root {
  /* ===== Font Families ===== */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Manrope', ui-monospace, SFMono-Regular, monospace;
  --font-dari: 'Vazirmatn', 'Noto Sans Arabic', sans-serif;
  --font-pashtu: 'Vazirmatn', 'Noto Sans Arabic', sans-serif;

  /* ===== Brand Core ===== */
  --sps-orange: 25 95% 53%;  /* #e87c10 */
  --sps-black: 0 0% 0%;      /* #000000 */
  --sps-gray: 0 0% 52%;      /* #848484 */

  /* ===== Base Light Mode ===== */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --foreground-muted: 0 0% 25%;

  /* ===== Brand Colors (Light Mode) ===== */
  --color-primary: 21 90% 48%;         /* Accessible Orange */
  --color-primary-light: 25 95% 53%;   /* Brand Orange */
  --color-primary-dark: 21 90% 38%;

  --color-secondary: 0 0% 45%;
  --color-accent: 0 0% 52%;

  /* ===== Semantic ===== */
  --color-success: 142 76% 27%;
  --color-warning: var(--sps-orange);
  --color-danger: 0 72% 51%;
  --color-info: 201 96% 32%;

  /* ===== Surface ===== */
  --color-card: 0 0% 100%;
  --color-muted: 0 0% 97%;
  --color-border: 0 0% 85%;

  /* ===== Grayscale ===== */
  --gray-50: 0 0% 98%;
  --gray-100: 0 0% 96%;
  --gray-200: 0 0% 90%;
  --gray-300: 0 0% 80%;
  --gray-400: 0 0% 58%;
  --gray-500: 0 0% 45%;
  --gray-600: 0 0% 39%;
  --gray-700: 0 0% 32%;
  --gray-800: 0 0% 25%;
  --gray-900: 0 0% 15%;
}

/* =========================================================
   DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;
    --foreground-muted: 0 0% 80%;

    --color-primary: 25 95% 53%; /* Use brand orange directly */
    --color-secondary: 0 0% 63%;
    --color-accent: 0 0% 52%;

    --color-card: 0 0% 7%;
    --color-muted: 0 0% 10%;
    --color-border: 0 0% 16%;

    --gray-50: 0 0% 98%;
    --gray-100: 0 0% 96%;
    --gray-200: 0 0% 90%;
    --gray-300: 0 0% 80%;
    --gray-400: 0 0% 58%;
    --gray-500: 0 0% 45%;
    --gray-600: 0 0% 39%;
    --gray-700: 0 0% 32%;
    --gray-800: 0 0% 25%;
    --gray-900: 0 0% 15%;
  }
}

/* =========================================================
   TAILWIND THEME BRIDGE — GENERATE UTILITIES
   This makes classes like:
   text-primary, bg-primary, border-primary,
   text-gray-200, bg-gray-900, etc.
========================================================= */
@theme inline {
  /* Base */
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-foreground-muted: hsl(var(--foreground-muted));

  /* Brand */
  --color-primary: hsl(var(--color-primary));
  --color-primary-light: hsl(var(--color-primary-light));
  --color-primary-dark: hsl(var(--color-primary-dark));

  --color-secondary: hsl(var(--color-secondary));
  --color-accent: hsl(var(--color-accent));

  /* Semantic */
  --color-success: hsl(var(--color-success));
  --color-warning: hsl(var(--color-warning));
  --color-danger: hsl(var(--color-danger));
  --color-info: hsl(var(--color-info));

  /* Surfaces */
  --color-card: hsl(var(--color-card));
  --color-muted: hsl(var(--color-muted));
  --color-border: hsl(var(--color-border));

  /* Grays */
  --color-gray-50: hsl(var(--gray-50));
  --color-gray-100: hsl(var(--gray-100));
  --color-gray-200: hsl(var(--gray-200));
  --color-gray-300: hsl(var(--gray-300));
  --color-gray-400: hsl(var(--gray-400));
  --color-gray-500: hsl(var(--gray-500));
  --color-gray-600: hsl(var(--gray-600));
  --color-gray-700: hsl(var(--gray-700));
  --color-gray-800: hsl(var(--gray-800));
  --color-gray-900: hsl(var(--gray-900));
}

  /* RTL layout */
  html[dir="rtl"] {
    direction: rtl;
    font-family: var(--font-arabic);
  }
  
  html[dir="ltr"] {
    direction: ltr;
    font-family: var(--font-sans);
  }
  /* Font classes for specific languages */
  html[lang="da"], 
  html[lang="ps"] {
    font-family: var(--font-arabic);
  }

  html.rtl-font {
    font-family: var(--font-arabic);
  }

  html[lang="en"] {
    font-family: var(--font-sans);
  }

/* =========================================================
   TYPOGRAPHY GLOBALS
========================================================= */
body {
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

  /* Better Arabic script rendering */
  .dari-font {
    font-family: var(--font-dari);
  }
  .pashtu-font {
    font-family: var(--font-pashtu);
  }
  .dari-font, .pashtu-font {
    font-feature-settings: "ss01", "ss02", "ccmp", "locl";
    letter-spacing: 0;
    word-spacing: -0.05em;
    line-height: 1.8;
  }

  /* Fix Arabic numerals in RTL */
  [dir="rtl"] .numbers {
    font-feature-settings: "numr";
  }

  /* Adjust spacing for RTL */
  [dir="rtl"] * {
    text-align: start;
  }

/* =========================================================
   CUSTOM UTILITIES
========================================================= */
.bg-brand-orange { background-color: hsl(var(--sps-orange)); }
.text-brand-orange { color: hsl(var(--sps-orange)); }
.border-brand-orange { border-color: hsl(var(--sps-orange)); }

.text-gradient-brand {
  background: linear-gradient(135deg, hsl(var(--sps-orange)), hsl(var(--color-primary)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-brand {
  background: linear-gradient(135deg, hsl(var(--sps-orange)), hsl(var(--color-primary)));
}

/* =========================================================
   FOCUS + SELECTION
========================================================= */
::selection {
  background: hsl(var(--color-primary));
  color: hsl(var(--background));
}

:focus-visible {
  outline: 2px solid hsl(var(--color-primary));
  outline-offset: 2px;
}

/* [lang="ps"] {
  font-size: 1.05em;
  line-height: 1.8;
}

[lang="ps"] input,
[lang="ps"] textarea {
  font-size: 1.1em;
  font-family: var(--font-arabic);
} */

/* LTR (default) */
html[dir="ltr"] .header-dropdown {
  right: 0.75rem; /* approx right-3 */
  left: auto;
}

/* RTL */
html[dir="rtl"] .header-dropdown {
  left: 0.75rem; /* mirror to left */
  right: auto;
}