/* ===========================================================
   Brave — Business Solutions
   Design tokens: colors, typography, spacing, motion, surface
   =========================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah-sans-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah-sans-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("../fonts/thmanyah-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============= BRAND COLOR — RAW ============= */
  --brave-plum:        #521F49;  /* Primary, leads everything */
  --brave-deep:        #3E1F48;  /* Deep backgrounds */
  --brave-magenta:     #6A2B60;  /* Accent — small doses */
  --brave-shadow:      #411235;  /* Depth / shadow */
  --brave-mauve:       #B5A1B4;  /* Soft tint */
  --brave-surface:     #F8F8F8;  /* Surface / text on dark */
  --brave-ink:         #1A0E18;  /* Near-black plum, for body text on light surfaces */

  /* Tonal variations derived from the palette (used sparingly) */
  --plum-900: #2A0F25;
  --plum-800: #3E1F48;
  --plum-700: #411235;
  --plum-600: #521F49;
  --plum-500: #6A2B60;
  --plum-400: #8E5184;
  --plum-300: #B5A1B4;
  --plum-200: #DCD0DB;
  --plum-100: #EFE7EE;
  --plum-050: #F8F4F7;

  /* ============= SEMANTIC COLOR ============= */
  /* Defaults assume a DARK plum canvas — this brand lives dark. */
  --bg:           var(--brave-plum);
  --bg-deep:      var(--brave-deep);
  --bg-elevated: #5E2655;      /* card on dark */
  --bg-sunken:   var(--brave-shadow);

  --fg:           var(--brave-surface);
  --fg-muted:     #D9C9D6;
  --fg-subtle:    var(--brave-mauve);
  --fg-disabled:  #7E6B7C;

  --accent:       var(--brave-magenta);
  --accent-fg:    var(--brave-surface);

  --line:         rgba(248, 248, 248, 0.14);
  --line-strong:  rgba(248, 248, 248, 0.28);

  --focus-ring:   var(--brave-mauve);

  /* Status (kept tonally aligned with plum family) */
  --success: #6AA56E;
  --warning: #D9A05B;
  --danger:  #C25450;

  /* ============= TYPOGRAPHY ============= */
  --font-sans: "Thmanyah Sans", "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-arabic: "Thmanyah Sans", "Noto Sans Arabic", system-ui, sans-serif;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  /* Type scale — display-led, generous */
  --t-display:    clamp(56px, 7vw, 112px); /* hero */
  --t-h1:         clamp(40px, 4.6vw, 72px);
  --t-h2:         clamp(30px, 3.2vw, 48px);
  --t-h3:         24px;
  --t-h4:         20px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;
  --t-eyebrow:    13px; /* tracked & uppercase */

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  --track-tight:   -0.02em;
  --track-normal:   0em;
  --track-wide:     0.08em;
  --track-eyebrow:  0.18em;

  /* ============= SPACING (8pt grid) ============= */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ============= RADIUS ============= */
  /* The signature petal: 100% on a single corner. */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;
  --r-petal: 100%;

  /* ============= ELEVATION ============= */
  --shadow-sm: 0 1px 2px rgba(26, 14, 24, 0.18);
  --shadow-md: 0 8px 24px -8px rgba(26, 14, 24, 0.35);
  --shadow-lg: 0 24px 64px -16px rgba(26, 14, 24, 0.55);
  --shadow-inset-line: inset 0 0 0 1px var(--line);

  /* ============= MOTION ============= */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);   /* quartic out */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);    /* expo out */
  --ease-exit:     cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ============= LAYOUT ============= */
  --container:   1280px;
  --gutter:      clamp(20px, 4vw, 56px);
}

/* ============= BASE ============= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* RTL helpers */
[dir="rtl"] {
  font-family: var(--font-arabic);
}

/* ============= SEMANTIC TYPE ============= */
.display, h1.display {
  font-size: var(--t-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h1, .h1 {
  font-size: var(--t-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--t-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--t-h3);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-size: var(--t-h4);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}
p, .p {
  font-size: var(--t-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}
.body-lg { font-size: var(--t-body-lg); line-height: var(--lh-normal); }
.body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); }
.caption { font-size: var(--t-caption); color: var(--fg-subtle); }
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-subtle);
}
.lead {
  font-size: var(--t-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ============= SURFACE PRIMITIVES ============= */
.surface-dark   { background: var(--brave-plum); color: var(--fg); }
.surface-deep   { background: var(--brave-deep); color: var(--fg); }
.surface-shadow { background: var(--brave-shadow); color: var(--fg); }
.surface-light  { background: var(--brave-surface); color: var(--brave-ink); }

/* ============= THE PETAL ============= */
/* The signature motif — a quarter-disc with one fully rounded corner. */
.petal {
  display: inline-block;
  background: var(--brave-plum);
  border-radius: 0 var(--r-petal) 0 0;   /* top-right rounded; rotate to taste */
  width: 64px;
  aspect-ratio: 1 / 1;
}
.petal--tl { border-radius: var(--r-petal) 0 0 0; }
.petal--tr { border-radius: 0 var(--r-petal) 0 0; }
.petal--br { border-radius: 0 0 var(--r-petal) 0; }
.petal--bl { border-radius: 0 0 0 var(--r-petal); }

/* Plum duotone overlay for imagery */
.duotone {
  position: relative;
  overflow: hidden;
}
.duotone > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
.duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--brave-deep), var(--brave-magenta));
  mix-blend-mode: multiply;
  pointer-events: none;
}