/* ==========================================================================
   MHR Mühendislik — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow, motion,
   layout and the "Engineering Blueprint" signature. Never hardcode a value that
   exists here. (Brand Guide App. A · DECISIONS D1/D4/D9.)
   ========================================================================== */

/* ---- Self-hosted fonts (KVKK/GDPR: never Google CDN) --------------------- */
/* Drop the woff2 files into assets/fonts/ (see assets/fonts/README.md).       */
/* Until then the fallback stack keeps the theme fully legible.                */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

:root {
  /* ---- Colour (D1 locked) ------------------------------------------------ */
  --color-primary:        #0F172A; /* Navy — logo H · text, dark sections, footer */
  --color-secondary:      #1C6FD6; /* MHR Blue — logo M · primary buttons, links */
  --color-accent:         #3EA935; /* MHR Green — logo R · highlights, mono readouts */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-white:          #FFFFFF;
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-border:         #E5E7EB;
  --color-text:           #111827;
  --color-text-secondary: #6B7280;

  /* Derived interaction tints (from tokens, not new colours) */
  --color-secondary-hover: #1A63BF; /* MHR Blue -8% for button hover */
  --color-accent-hover:    #369130;
  --color-navy-soft:       #1E293B; /* raised surface on navy sections */
  --surface-muted:         #F1F5F9; /* subtle panel tint (bg -1 step) */

  /* ---- Signature: Engineering Blueprint --------------------------------- */
  --blueprint-line:       rgba(28, 111, 214, 0.08);  /* blue hairline on light */
  --blueprint-line-dark:  rgba(62, 169, 53, 0.12);   /* green hairline on navy  */
  --blueprint-tick:       rgba(62, 169, 53, 0.55);   /* corner registration ticks */
  --blueprint-cell:       64px;                       /* 8× base unit grid cell   */
  --data-readout:         var(--color-accent);        /* mono stat colour         */

  /* ---- Typography -------------------------------------------------------- */
  --font-body:    "Manrope", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  /* Type scale (px in comments) */
  --fs-hero:    4.5rem;    /* 72 */
  --fs-hero-lg: 3.5rem;    /* 56 laptop */
  --fs-hero-md: 2.625rem;  /* 42 tablet */
  --fs-hero-sm: 2.125rem;  /* 34 mobile */
  --fs-page:    3.5rem;    /* 56 */
  --fs-section: 3rem;      /* 48 */
  --fs-card:    1.5rem;    /* 24 */
  --fs-body:    1.125rem;  /* 18 */
  --fs-button:  1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */

  --lh-tight:   1.1;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-mono:    0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-card:   20px;
  --radius-button: 16px;
  --radius-input:  14px;
  --radius-image:  24px;
  --radius-pill:   999px;

  /* ---- Spacing (8px system) --------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Structural aliases (built only from the 8px scale) */
  --grid-gutter-mobile: var(--space-2); /* 16 */
  --grid-gutter:        var(--space-3); /* 24 */

  /* ---- Shadows — soft, natural ------------------------------------------ */
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:     0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg:     0 20px 48px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 8px 24px rgba(62, 169, 53, 0.22); /* green glow */

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1440px;
  --container-pad: 24px;
  --measure:       65ch;
  --measure-hero:  48ch;

  /* Header heights per state */
  --header-h:          72px;
  --header-h-scrolled: 64px;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- z-index (D4 locked, gapped scale) -------------------------------- */
  --z-base:       100;
  --z-header:     200;
  --z-dropdown:   300; /* nav dropdown / mega-menu */
  --z-drawer:     350; /* mobile drawer overlay */
  --z-mobile-cta: 400; /* sticky mobile CTA bar */
  --z-fab:        410; /* WhatsApp FAB */
  --z-modal:      500;
  --z-toast:      600;

  /* Header ink swaps between transparent/solid states (set in base.css) */
  --nav-ink: var(--color-text);

  color-scheme: light;
}

/* ---- Dark-mode placeholder (NOT implemented) -----------------------------
   Every colour comes from a token so a future dark mode is a token swap only.
   This block maps the surface/text tokens for user-preference dark; brand hues
   (blue/green) are kept. Do not fully implement — this is a forward-compat stub.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    /* Intentionally left mostly inert for v1. Uncomment to activate later.
    --color-bg:             #0B1220;
    --color-surface:        #111A2E;
    --color-text:           #E6EDF7;
    --color-text-secondary: #9AA7BC;
    --color-border:         #1E293B;
    --surface-muted:        #0F172A;
    color-scheme: dark;
    */
  }
}