/* ==========================================================================
   IKC Teknoloji A.Ş. — Design tokens
   Single source of truth for colour, type, space, line, motion and grid.
   Nothing below this file may hard-code a colour, a radius or a duration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typefaces — self-hosted subsets.
   Archivo carries display, interface and reading. Montserrat is reserved for
   the live corporate lockup. Tabular figures come from Archivo's own `tnum`,
   so monospace is never worn as a costume for "technical".
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ------------------------------------------------------------------------
     COLOUR
     Drawn from the corporate mark: one blue (#0B2E6D) that owns surfaces —
     the home hero, the primary action, the current nav item — not merely a
     hover. Neutrals sit on the mark's hue (OKLCH 264) so grey and blue are
     one family. Authored in OKLCH; hex fallbacks precede each value.
     ------------------------------------------------------------------------ */

  --paper: #f2f3f5;
  --paper: oklch(96.4% 0.003 264);
  --paper-raised: #f9fafb;
  --paper-raised: oklch(98.4% 0.002 264);
  --paper-sunk: #e8eaed;
  --paper-sunk: oklch(93.6% 0.005 264);

  --ink: #0a0d13;
  --ink: oklch(16% 0.013 264);
  --ink-soft: #2a2e36;
  --ink-soft: oklch(30% 0.015 264);
  --graphite: #595e66;
  --graphite: oklch(48% 0.015 264);
  --stone: #82868f;
  --stone: oklch(62% 0.014 264);

  --line: #d2d4d9;
  --line: oklch(87% 0.007 264);
  --line-soft: #e1e3e6;
  --line-soft: oklch(91.5% 0.005 264);
  --line-strong: #acb0b7;
  --line-strong: oklch(75.5% 0.012 264);

  /* Signal — the corporate blue shared with the logo. --signal is both the
     graphic value and a surface (hero, primary action). Body-size links use
     the identical --signal-ink alias on paper. */
  --signal: #0b2e6d;
  --signal: oklch(32.009% 0.11682 261.131);
  --signal-ink: #0b2e6d;
  --signal-ink: oklch(32.009% 0.11682 261.131);
  --signal-wash: #dce8ff;
  --signal-wash: oklch(93% 0.034 264);
  --on-signal: #f4f6fb;
  --on-signal: oklch(97.2% 0.006 264);
  --on-signal-soft: #c5cee8;
  --on-signal-soft: oklch(84% 0.03 264);

  /* Alert — form validation only. The signal is the brand blue and cannot
     also carry an error state, so validation gets its own red. It appears
     nowhere but an invalid field and its message. */
  --alert: #a31518;
  --alert: oklch(46% 0.175 27);

  /* Inverted surface — used for the closing statement and nothing else. */
  --ink-surface: #0a0d13;
  --ink-surface: oklch(16% 0.013 264);
  --ink-surface-line: #292e37;
  --ink-surface-line: oklch(30% 0.017 264);
  --on-ink: #e4e6ea;
  --on-ink: oklch(92.5% 0.006 264);
  --on-ink-soft: #989ba2;
  --on-ink-soft: oklch(69% 0.011 264);

  /* The signal reads 1.5:1 on the inverted surface — below
     even the 3:1 graphic floor. --signal-on-ink is the same blue lifted to
     6.1:1 there, and is the only signal value allowed inside .section--ink
     and the footer. */
  --signal-on-ink: #5b8df9;
  --signal-on-ink: oklch(66% 0.17 264);

  /* The focus ring is the signal itself: one blue, not two. On the inverted
     surface base.css swaps it for --on-ink. */
  --focus: #0b2e6d;
  --focus: oklch(32.009% 0.11682 261.131);

  /* Corporate lockup — the exact same primary blue as the site signal. */
  --brand-mark: var(--signal);
  --brand-mark-reversed: #ffffff;

  /* ------------------------------------------------------------------------
     TYPE
     Archivo owns every page role; Montserrat owns only the corporate lockup.
     Metadata sits small and tracked, display runs large and tight.
     ------------------------------------------------------------------------ */

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --font-brand: 'Montserrat', 'Avenir Next', 'Helvetica Neue', Helvetica, sans-serif;

  /* Fluid scale, 390px → 1440px viewport */
  --t-meta: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --t-small: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --t-body: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --t-lead: clamp(1.1875rem, 1.11rem + 0.33vw, 1.4375rem);
  --t-h4: clamp(1.1875rem, 1.13rem + 0.24vw, 1.375rem);
  --t-h3: clamp(1.4375rem, 1.31rem + 0.55vw, 1.875rem);
  --t-h2: clamp(1.875rem, 1.62rem + 1.09vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.87rem + 1.62vw, 3.5rem);
  --t-display: clamp(2.375rem, 1.83rem + 2.32vw, 4.25rem);
  --t-hero-statement: clamp(2.25rem, 1.693rem + 2.286vw, 3.75rem);
  --t-wordmark: clamp(1.7rem, 1.48rem + 0.92vw, 2.25rem);
  --t-wordmark-sub: clamp(0.68rem, 0.592rem + 0.368vw, 0.9rem);
  --wordmark-type-gap: clamp(0.19rem, 0.166rem + 0.103vw, 0.252rem);

  /* Turkish sets lower than English: ş, ç and ğ carry a cedilla or breve that
     a sub-1.0 display leading clips against the following line. The tight
     values below are the floor at which Türkçe still clears. */
  --lh-display: 1.07;
  --lh-tight: 1.1;
  --lh-heading: 1.16;
  --lh-lead: 1.48;
  --lh-body: 1.62;
  --lh-wordmark: 1;
  --lh-wordmark-sub: 1;

  --tr-display: -0.03em;
  --tr-heading: -0.02em;
  --tr-body: 0;
  --tr-meta: 0.08em;
  --tr-wordmark: -0.015em;
  --tr-wordmark-sub: 0;

  --wd-display: 108; /* Archivo width axis for display lockups */
  --wd-text: 100;
  --wd-ui: 100;
  --fw-text: 400;
  --fw-wordmark: 700;
  --fw-wordmark-sub: 450;

  --measure: 68ch;
  --measure-narrow: 58ch;
  --measure-wide: 78ch;

  /* ------------------------------------------------------------------------
     SPACE — 4px base, geometric-ish steps. Tight inside a group, generous
     between groups; always more space above a heading than below it.
     ------------------------------------------------------------------------ */

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 4.5rem;
  --s-10: 6rem;
  --s-11: 8rem;

  /* Vertical rhythm between major page sections */
  --section-y: clamp(4rem, 2.4rem + 6.8vw, 8.5rem);
  --section-y-tight: clamp(3rem, 2.1rem + 3.8vw, 5.5rem);

  /* ------------------------------------------------------------------------
     GRID — 12 columns, editorial. Content width varies by function: reading
     surfaces are narrow, visual narratives are wide.
     ------------------------------------------------------------------------ */

  --shell-max: 88rem; /* 1408px */
  --gutter: clamp(1.25rem, 0.6rem + 2.7vw, 3.5rem);
  --col-gap: clamp(1rem, 0.55rem + 1.9vw, 2rem);

  /* ------------------------------------------------------------------------
     LINE & FORM — borders are the structure. Radius is effectively absent:
     2px is the ceiling and it exists only so hairlines do not look chipped.
     ------------------------------------------------------------------------ */

  --hair: 1px;
  --rule: 1px solid var(--line);
  --rule-soft: 1px solid var(--line-soft);
  --rule-strong: 1px solid var(--line-strong);
  --rule-ink: 1px solid var(--ink);
  --radius: 2px;
  --about-span-opacity: 0.75;
  --about-span-ratio: 3 / 1;
  --about-span-position-y: 50%;
  --about-span-max: 60rem;

  /* ------------------------------------------------------------------------
     MOTION — one system, one clock. Exponential ease-out from an
     already-visible default. Every duration below is multiplied by
     --motion-scale, which the reduced-motion block sets to 0.
     ------------------------------------------------------------------------ */

  --motion-scale: 1;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: calc(140ms * var(--motion-scale));
  --d-base: calc(280ms * var(--motion-scale));
  --d-slow: calc(560ms * var(--motion-scale));
  --d-reveal: calc(760ms * var(--motion-scale));

  --header-h: 6rem;
  --wordmark-h: 3.25rem;
  --company-logo-w: 12rem;
  --company-logo-h: 3.25rem;
  --company-logo-ajan-h: 3.35rem;
  --company-logo-sender-h: 3.5rem;
  --z-header: 100;
  --z-nav: 200;
  --z-skip: 300;
}

@media (min-width: 30rem) {
  :root {
    --header-h: 6.75rem;
    --wordmark-h: 3.75rem;
  }
}

@media (min-width: 60rem) {
  :root {
    --header-h: 7.5rem;
    --wordmark-h: 4.25rem;
  }
}

/* Reduced motion is not a degraded mode: durations collapse to zero, every
   revealed element is already in its final state, and the disc field holds
   one still frame of the fully compounded mark. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0;
  }
}