/* ============================================================
   Kastar Mühendislik — Colors & Type
   Source of truth for all design tokens. Mirrors the variables
   in the production site (reference/kastar-original.html).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────────────
   BRAND PRIMITIVES — never use these directly in components,
   reach for the semantic tokens below instead.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-navy:        #0c1b33;   /* primary navy / lacivert     */
  --brand-navy-deep:   #070e1c;   /* footer / deepest surface    */
  --brand-navy-lift:   #111f3a;   /* raised surface in dark mode */
  --brand-gold:        #c9a217;   /* dark-mode gold              */
  --brand-gold-light:  #b08c10;   /* light-mode gold (accessible)*/
  --brand-gold-bright: #f0d060;   /* highlight on dark imagery   */

  /* Neutrals */
  --neutral-0:    #ffffff;
  --neutral-50:   #f5f7fb;
  --neutral-100:  #edf0f7;
  --neutral-200:  #dde2ee;
  --neutral-300:  #e4e8f2;
  --neutral-500:  #4a5568;
  --neutral-900:  #0c1b33;

  /* Type families */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --fs-xs:    11px;   --lh-xs:    1.4;
  --fs-sm:    13px;   --lh-sm:    1.6;
  --fs-base:  14px;   --lh-base:  1.65;
  --fs-md:    16px;   --lh-md:    1.75;
  --fs-lg:    18px;   --lh-lg:    1.7;
  --fs-xl:    22px;   --lh-xl:    1.4;
  --fs-2xl:   28px;   --lh-2xl:   1.25;
  --fs-3xl:   42px;   --lh-3xl:   1.15;
  --fs-4xl:   52px;   --lh-4xl:   1.1;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Letter spacing */
  --tracking-display:   -1.5px;   /* h1 hero                      */
  --tracking-title:     -0.8px;   /* section titles               */
  --tracking-base:       0;
  --tracking-eyebrow:   2px;      /* uppercase eyebrows           */
  --tracking-cap:       1.5px;    /* hero badge / labels          */

  /* Radii */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  14px;
  --radius-2xl: 18px;
  --radius-pill: 100px;

  /* Spacing scale (4-base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;   /* gutter                                  */
  --space-12: 52px;   /* section sub bottom                      */
  --space-16: 72px;   /* about / contact column gap              */
  --space-20: 80px;   /* section padding-y                       */
  --space-25: 100px;  /* hero padding-y                          */

  /* Shadows */
  --shadow-card:   0 8px 32px rgba(12, 27, 51, 0.12);
  --shadow-card-d: 0 8px 32px rgba(0, 0, 0, 0.30);
  --shadow-soft:   0 8px 28px rgba(12, 27, 51, 0.10);
  --shadow-panel:  0 8px 40px rgba(0, 0, 0, 0.15);

  /* Container */
  --container-max: 1240px;
  --container-pad: 36px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — DARK / "Gece" mode (default)
   ───────────────────────────────────────────────────────────── */
.dark, :root {
  --bg:              #0a1628;
  --surface:         #0c1b33;
  --surface-2:       #111f3a;
  --surface-raised:  rgba(255,255,255,0.05);

  --border:          rgba(255,255,255,0.10);
  --border-soft:     rgba(255,255,255,0.07);

  --fg:              #e8edf5;
  --fg-muted:        rgba(255,255,255,0.50);
  --fg-subtle:       rgba(255,255,255,0.35);

  --accent:          var(--brand-gold);
  --accent-bright:   var(--brand-gold-bright);
  --accent-tint:     rgba(201,162,23,0.15);
  --accent-border:   rgba(201,162,23,0.30);

  --nav-bg:          #0c1b33;
  --nav-border:      rgba(255,255,255,0.07);

  --hero-overlay:    rgba(10,22,40,0.55);

  --form-bg:         rgba(255,255,255,0.07);
  --form-border:     rgba(255,255,255,0.15);
  --form-fg:         #ffffff;

  --footer-bg:       var(--brand-navy-deep);
  --footer-fg:       rgba(255,255,255,0.35);

  --btn-outline-fg:     rgba(255,255,255,0.75);
  --btn-outline-border: rgba(255,255,255,0.20);
  --btn-gold-fg:        #0c1b33;

  --section-alt-bg:     #0c1b33;
  --section-alt-border: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — LIGHT / "Gündüz" mode
   ───────────────────────────────────────────────────────────── */
.light {
  --bg:              #f5f7fb;
  --surface:         #ffffff;
  --surface-2:       #edf0f7;
  --surface-raised:  #ffffff;

  --border:          #dde2ee;
  --border-soft:     #e4e8f2;

  --fg:              #0c1b33;
  --fg-muted:        #4a5568;
  --fg-subtle:       #6b7280;

  --accent:          var(--brand-gold-light);
  --accent-bright:   var(--brand-gold);
  --accent-tint:     rgba(176,140,16,0.12);
  --accent-border:   rgba(176,140,16,0.30);

  --nav-bg:          #ffffff;
  --nav-border:      #e4e8f2;

  --hero-overlay:    rgba(10,22,40,0.45);

  --form-bg:         #ffffff;
  --form-border:     #dde2ee;
  --form-fg:         #0c1b33;

  --footer-bg:       #0c1b33;
  --footer-fg:       rgba(255,255,255,0.40);

  --btn-outline-fg:     rgba(255,255,255,0.85);
  --btn-outline-border: rgba(255,255,255,0.25);
  --btn-gold-fg:        #ffffff;

  --section-alt-bg:     #ffffff;
  --section-alt-border: #dde2ee;
}

/* ─────────────────────────────────────────────────────────────
   BASE TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, .h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: var(--lh-4xl);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.h-section, .h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: var(--lh-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  color: var(--fg);
  text-wrap: pretty;
}

.h-card, .h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: 0;
}

.h-eyebrow, .eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.body-lg     { font-size: var(--fs-lg);  line-height: var(--lh-lg);  color: var(--fg-muted); }
.body, p     { font-size: var(--fs-md);  line-height: var(--lh-md);  color: var(--fg-muted); }
.body-sm     { font-size: var(--fs-sm);  line-height: var(--lh-sm);  color: var(--fg-muted); }
.caption     { font-size: var(--fs-xs);  line-height: var(--lh-xs);  color: var(--fg-subtle); }

.label-cap {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Accent helpers */
.text-accent      { color: var(--accent); }
.text-accent-br   { color: var(--accent-bright); }
.bg-navy          { background: var(--brand-navy); color: #fff; }
.bg-navy-deep     { background: var(--brand-navy-deep); color: #fff; }