/* Auto-generated from manifest.json — do not edit the variables section directly */
[data-tenant="forsatek"] {
  /* Brand core */
  --brand-primary: #0747FF;
  --brand-primary-dark: #0638CC;
  --brand-accent: #5C86FF;
  --brand-accent-soft: rgba(7, 71, 255, 0.16);

  /* Legacy bridge */
  --brand-red: var(--brand-primary);
  --brand-red-dark: var(--brand-primary-dark);
  --brand-red-deep: #0638CC;
  --brand-red-tint: #EEF3FF;
  --brand-gold: var(--brand-accent);
  --brand-gold-soft: var(--brand-accent-soft);

  /* Blue/Cyan tokens */
  --brand-blue: #0747FF;
  --brand-blue-dark: #0638CC;
  --brand-cyan: #5C86FF;

  /* Neutrals */
  --neutral-0: #FFFFFF;
  --neutral-50: #F5F7FF;
  --neutral-100: #EEF3FF;
  --neutral-200: #D9DCE8;
  --neutral-300: #C1C6D3;
  --neutral-400: #868BA2;
  --neutral-500: #4B5070;
  --neutral-600: #3B4160;
  --neutral-700: #1C2036;
  --neutral-800: #12131A;
  --neutral-900: #030304;

  /* Semantic backgrounds */
  --bg: var(--neutral-0);
  --bg-soft: var(--neutral-50);
  --bg-muted: var(--neutral-100);
  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-600);
  --fg-3: var(--neutral-500);
  --fg-disabled: var(--neutral-400);
  --fg-on-dark: #FFFFFF;
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* Accent */
  --accent: var(--brand-primary);
  --accent-fg: #FFFFFF;
  --accent-hover: var(--brand-primary-dark);

  /* Status */
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #0747FF;

  /* Secondary palette */
  --secondary-teal: #0D9488;
  --secondary-teal-deep: #134E4A;
  --secondary-teal-mid: #0F766E;
  --secondary-teal-light: #CCFBF1;
  --secondary-purple: #0747FF;
  --secondary-purple-deep: #02123D;
  --secondary-purple-mid: #052B99;
  --secondary-purple-light: #DCE6FF;
  --secondary-orange: #EA580C;
  --secondary-orange-deep: #7C2D12;
  --secondary-orange-mid: #C2410C;
  --secondary-orange-light: #FFEDD5;
  --secondary-lime: #65A30D;
  --secondary-lime-deep: #365314;
  --secondary-lime-mid: #4D7C0F;
  --secondary-lime-light: #ECFCCB;
  --secondary-green: #16A34A;
  --secondary-green-deep: #14532D;
  --secondary-green-mid: #15803D;
  --secondary-green-light: #DCFCE7;
  --secondary-coral: #E11D48;
  --secondary-coral-deep: #881337;
  --secondary-coral-mid: #BE123C;
  --secondary-coral-light: #FFE4E6;

  /* Chart + zone palettes (shared with the live preview) */
  --chart-1: #0747FF;
  --chart-2: #5C86FF;
  --chart-3: #02123D;
  --chart-4: #B9CEFF;
  --chart-5: #052B99;
  --chart-6: #8FB0FF;
  --chart-7: #2D5BFF;
  --chart-8: #4B5070;
  --zone-1: #DCE6FF;
  --zone-2: #B9CEFF;
  --zone-3: #EEF3FF;
  --zone-4: #8FB0FF;
  --zone-5: #D9DCE8;
  --zone-6: #C2C8D8;
  --zone-7: #CBD0DC;
  --zone-8: #D5D8E2;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Space Grotesk", "Inter", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 32px 64px rgba(15, 23, 42, 0.16);
}

/* Component overrides */
/* ==========================================================================
   ForsaTEK — brand details the manifest fields cannot express.

   Every value below is traced to forsatek.com's own :root tokens, read from
   the live site on 2026-09-09: --color-primary-50..950, --background,
   --color-surface-muted, --color-border, --font-sans, --font-heading,
   --radius-lg, --radius-xl. Nothing here is invented; the one interpolated
   value (neutral-400) lives on the Colors tab, not in this file.
   ========================================================================== */

/* Brand typefaces, self-hosted from this theme's assets/ (Inter and Space
   Grotesk, both SIL OFL, variable woff2, latin subset). The family names must
   match --font-sans / --font-serif on the Typography tab. */
@font-face {
  font-family: "Inter";
  src: url("/api/tenants/forsatek/assets/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/api/tenants/forsatek/assets/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

[data-tenant="forsatek"] {
  /* The site's primary ramp, verbatim. --fk-primary-600 is the anchor and is
     the same value the Colors tab carries as Primary. */
  --fk-primary-50:  #EEF3FF;
  --fk-primary-100: #DCE6FF;
  --fk-primary-200: #B9CEFF;
  --fk-primary-300: #8FB0FF;
  --fk-primary-400: #5C86FF;
  --fk-primary-500: #2D5BFF;
  --fk-primary-600: #0747FF;
  --fk-primary-700: #0638CC;
  --fk-primary-800: #052B99;
  --fk-primary-900: #041F66;
  --fk-primary-950: #02123D;

  /* The site's dark surfaces. --fk-surface is its --background. */
  --fk-surface:       #030304;
  --fk-surface-muted: #0A0B12;
  --fk-border-dark:   #1C2036;

  /* Space Grotesk is the site's heading face (--font-heading). The theme
     manifest has no display slot, so the app's --font-display is wired here. */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:  "Inter", "Tajawal", system-ui, sans-serif;

  /* Rounded shapes — the site sets --radius-lg: 1rem and --radius-xl: 1.5rem.
     The rest of the ramp is scaled around those two anchors. */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* 1rem  — site --radius-lg */
  --radius-xl:   24px;   /* 1.5rem — site --radius-xl */
  --radius-2xl:  32px;
  --radius-full: 999px;

  /* Elevation tinted with the deep brand navy rather than a neutral black,
     so shadows sit in the same colour family as the canvas. */
  --shadow-xs: 0 1px 2px rgba(2, 18, 61, 0.05);
  --shadow-sm: 0 2px 8px rgba(2, 18, 61, 0.06), 0 1px 2px rgba(2, 18, 61, 0.05);
  --shadow-md: 0 8px 24px rgba(2, 18, 61, 0.08), 0 2px 6px rgba(2, 18, 61, 0.05);
  --shadow-lg: 0 18px 48px rgba(2, 18, 61, 0.12), 0 6px 16px rgba(2, 18, 61, 0.06);
  --shadow-xl: 0 32px 72px rgba(2, 18, 61, 0.16), 0 10px 24px rgba(2, 18, 61, 0.08);

  /* Deep brand ink for dark surfaces (API docs header, code blocks). Named
     --emirates-dark for historical reasons; it is the shared hook every
     tenant repoints. */
  --emirates-dark: var(--fk-surface);

  --gradient-brand: linear-gradient(140deg, #02123D 0%, #0638CC 55%, #0747FF 100%);
}

/* Dark mode — forsatek.com is dark-first, so this is the brand's native look
   rather than an inversion of it. Surfaces are the site's own. */
[data-tenant="forsatek"][data-dark="true"] {
  --bg:       #0A0B12;   /* site --color-surface-muted */
  --bg-soft:  #030304;   /* site --background */
  --bg-muted: #12131A;
  --fg-1:     #F5F7FF;   /* site --foreground */
  --fg-2:     #C1C6D3;
  --fg-3:     #868BA2;
  --neutral-0:   #0A0B12;
  --neutral-50:  #030304;
  --neutral-100: #12131A;
  --neutral-200: #1C2036;
  --neutral-300: #3B4160;
  --neutral-400: #4B5070;
  --border:        #1C2036;   /* site --color-border */
  --border-strong: #3B4160;
  /* The 600 anchor is too dark to read on near-black; the site uses its
     lighter 400/500 steps for interactive elements on dark. */
  --accent:       #5C86FF;
  --accent-hover: #8FB0FF;
}
[data-tenant="forsatek"][data-dark="true"] body { background: var(--bg-soft); }

/* Body — brand typeface + canvas */
[data-tenant="forsatek"] body {
  background: var(--bg-soft);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Headings take the display face, matching the site's Space Grotesk headers. */
[data-tenant="forsatek"] h1,
[data-tenant="forsatek"] h2,
[data-tenant="forsatek"] h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Top-nav baseline ribbon — the primary ramp reading left to right. */
[data-tenant="forsatek"] .top-nav-baseline {
  background: linear-gradient(90deg, transparent 0%, var(--fk-primary-600) 30%, var(--fk-primary-400) 70%, transparent 100%);
}

/* Nav lockup — the logo already carries the FORSATEK wordmark, so the product
   name sits beside it in the display face at a light weight. */
[data-tenant="forsatek"] .brand { gap: 14px; }
[data-tenant="forsatek"] .brand-logo { height: 30px; width: auto; }
[data-tenant="forsatek"] .brand-side .brand-logo { height: 26px; }
[data-tenant="forsatek"] .brand-product {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fk-primary-600);
}
[data-tenant="forsatek"][data-dark="true"] .brand-product { color: #F5F7FF; }

/* User avatar — brand gradient */
[data-tenant="forsatek"] .user-avatar {
  background: var(--gradient-brand);
  color: #fff;
}

/* Active side-link */
[data-tenant="forsatek"] .side-link.is-active { color: var(--fk-primary-600); }

/* Calendar range highlight — lightest tint from the ramp */
[data-tenant="forsatek"] .cal-cell.in-range {
  background: var(--fk-primary-50);
  color: var(--fk-primary-800);
}

/* Login hero — the site's signature blue-on-near-black gradient.
   The shared login lays its hero panel out with the Tailwind arbitrary class
   `bg-[var(--brand-primary)]`, which sets background-COLOR. Painting a
   background-IMAGE over it needs no !important and no specificity fight, and
   the flat colour stays as the fallback if the gradient ever fails to parse.
   (`.login-left` is NOT used here — that class belongs to the DCT login
   variant in src/app/login/dct-login-client.tsx.)

   `.min-h-screen` is part of the selector on purpose: the Sign In button
   carries the same `bg-[var(--brand-primary)]` class, and without that extra
   qualifier the gradient painted the button too. */
[data-tenant="forsatek"] .min-h-screen.bg-\[var\(--brand-primary\)\] {
  background-image: var(--gradient-brand);
}

/* API docs — deep brand ink, blue hairline */
[data-tenant="forsatek"] .api-docs-header {
  background: var(--fk-surface);
  border-bottom-color: var(--fk-primary-600);
}
[data-tenant="forsatek"] .api-code-block { background: var(--fk-surface); }

/* Focus rings — brand blue at low alpha */
[data-tenant="forsatek"] .field-input:focus-within {
  border-color: var(--fk-primary-600);
  box-shadow: 0 0 0 3px rgba(7, 71, 255, 0.20);
}

/* Dark-mode logo swap.
   Navbar.tsx and SideNav.tsx always render `branding.logoPath` — neither
   checks data-dark, so the dark wordmark in logo.png sits almost invisibly on
   the near-black dark canvas. Swapping the rendered image with `content`
   keeps the fix inside this theme; no app code changes, and light mode is
   untouched. Remove this rule if the nav ever learns to pick logoWhitePath
   itself. */
[data-tenant="forsatek"][data-dark="true"] .brand-logo {
  content: url("/api/tenants/forsatek/assets/logo-white.png");
}