/*
 * Kolektif Medya — tasarım jetonları.
 * Next.js projesindeki src/styles/tokens/*.css dosyalarının birebir karşılığı.
 * Tek fark: font aileleri next/font değişkenleri yerine burada tanımlı.
 */

:root{
/* ---- Font aileleri (Next.js'te next/font üretiyordu) ---- */
--kv-font-poppins:"Poppins";
--kv-font-montserrat:"Montserrat";
--kv-font-lora:"Lora";               /* blog başlıkları — magazin serifi */
}

/* ==================================================== colors ==== */
:root{
/* ---- Base palette ----
   One hue, one ramp. Every step holds the accent's hue (~46-47°) at full chroma and
   varies lightness only, so no second colour ever enters the palette. ---- */
--kv-yellow-400:#ffe58c;   /* lightest step — hairlines and rules on photo overlays */
--kv-yellow-500:#ffdb58;   /* brand mustard — the single accent */
--kv-yellow-600:#f2c93f;   /* one step down — hover, field fill inside yellow panels */
--kv-yellow-700:#e5b726;   /* divider rules on yellow */
--kv-yellow-800:#cca00d;   /* 3px field borders on yellow, darkest step */

--kv-ink-900:#101010;      /* footer utility bar — darkest anthracite step */
--kv-ink-800:#181818;      /* footer body */
--kv-ink-700:#1c1c1c;      /* dark card fill */
--kv-ink-600:#242424;      /* primary ink + dark sections */
--kv-grey-500:#939393;
--kv-grey-300:#dddddd;     /* inactive indicator */
--kv-grey-200:#eeeeee;     /* image placeholder / soft fill */
--kv-grey-100:#f9f9f9;     /* alternating section band */
--kv-white:#ffffff;
--kv-black:#000000;

/* ---- Opacity steps ---- */
--kv-alpha-scrim:0.302;
--kv-alpha-veil:0.4;
--kv-alpha-hover:0.8;
--kv-alpha-solid:0.902;

/* ---- Semantic aliases ---- */
--kv-accent:var(--kv-yellow-500);
--kv-accent-hover:var(--kv-yellow-600);
--kv-accent-border:var(--kv-yellow-800);

--kv-text-strong:var(--kv-ink-600);
--kv-text-body:var(--kv-ink-600);
--kv-text-muted:var(--kv-ink-600);        /* secondary copy is ink, not grey — readability */
--kv-text-on-dark:var(--kv-white);
--kv-text-on-accent:var(--kv-ink-600);
--kv-text-inverse-muted:var(--kv-white);

--kv-surface-page:var(--kv-white);
--kv-surface-band:var(--kv-grey-100);
--kv-surface-dark:var(--kv-ink-600);
--kv-surface-card:var(--kv-white);
--kv-surface-card-dark:var(--kv-ink-700);
--kv-surface-card-accent:var(--kv-yellow-500);
--kv-surface-field:var(--kv-yellow-600);
--kv-surface-footer:var(--kv-ink-800);
--kv-surface-footer-bar:var(--kv-ink-900);
--kv-surface-placeholder:var(--kv-grey-200);

--kv-border-hairline:var(--kv-grey-200);
--kv-border-field:var(--kv-yellow-800);
--kv-border-rule-on-accent:rgba(229,183,38,.4);
--kv-border-rule-on-dark:rgba(255,255,255,.15);
--kv-footer-mark-alpha:0.08;
--kv-border-field-on-dark:rgba(255,255,255,.25);
--kv-scrim:rgba(0,0,0,.302);
--kv-scrim-contact:rgba(16,16,16,.88);
--kv-scrim-accent:rgba(255,219,88,.302);

--kv-indicator-active:var(--kv-ink-600);
--kv-indicator-idle:var(--kv-grey-300);
}

/* ================================================ typography ==== */
:root{
/* ---- Families ---- */
--kv-font-display:var(--kv-font-poppins),"Helvetica Neue",Arial,sans-serif;
--kv-font-body:var(--kv-font-montserrat),"Helvetica Neue",Arial,sans-serif;
--kv-font-serif:var(--kv-font-lora),Georgia,"Times New Roman",serif;

/* ---- Weights (headings run heavy, body stays at 400/500) ---- */
--kv-weight-regular:400;
--kv-weight-medium:500;
--kv-weight-semibold:600;
--kv-weight-bold:700;
--kv-weight-extrabold:800;

/* ---- Sizes ---- */
--kv-size-hero:95px;
--kv-size-h1:56px;
--kv-size-h2:42px;
--kv-size-h3:30px;
--kv-size-h4:26px;
--kv-size-lead:23px;
--kv-size-body:16px;
--kv-size-label:15px;
--kv-size-meta:13px;

/* ---- Line heights ---- */
--kv-leading-hero:100px;
--kv-leading-h2:53px;
--kv-leading-h3:39px;
--kv-leading-h4:33px;
--kv-leading-lead:37px;
--kv-leading-body:26px;
--kv-leading-label:20px;

--kv-leading-tight:1.1;
--kv-leading-snug:1.3;
--kv-leading-normal:1.625;

/* ---- Tracking: only uppercase labels are tracked ---- */
--kv-tracking-label:.06em;
--kv-tracking-eyebrow:.14em;
--kv-tracking-heading:-.01em;

/* ---- Semantic text roles ---- */
--kv-text-hero:var(--kv-weight-bold) var(--kv-size-hero)/var(--kv-leading-hero) var(--kv-font-display);
--kv-text-h2:var(--kv-weight-bold) var(--kv-size-h2)/var(--kv-leading-h2) var(--kv-font-display);
--kv-text-h3:var(--kv-weight-bold) var(--kv-size-h3)/var(--kv-leading-h3) var(--kv-font-display);
--kv-text-h4:var(--kv-weight-bold) var(--kv-size-h4)/var(--kv-leading-h4) var(--kv-font-display);
--kv-text-hero-lead:var(--kv-weight-semibold) 19px/33px var(--kv-font-body);
--kv-text-lead:var(--kv-weight-regular) var(--kv-size-lead)/var(--kv-leading-lead) var(--kv-font-display);
--kv-text-copy:var(--kv-weight-regular) var(--kv-size-body)/var(--kv-leading-body) var(--kv-font-body);
--kv-text-footer-strong:var(--kv-weight-medium) var(--kv-size-lead)/var(--kv-leading-h4) var(--kv-font-display);
--kv-text-reel-index:var(--kv-weight-extrabold) var(--kv-size-label)/1 var(--kv-font-display);
--kv-text-nav:var(--kv-weight-semibold) var(--kv-size-label)/var(--kv-leading-label) var(--kv-font-body);
}

/* =================================================== spacing ==== */
:root{
/* ---- Spacing scale ---- */
--kv-space-1:4px;
--kv-space-2:8px;
--kv-space-3:10px;
--kv-space-4:12px;
--kv-space-5:16px;
--kv-space-6:20px;
--kv-space-7:24px;
--kv-space-8:30px;
--kv-space-9:40px;
--kv-space-10:50px;
--kv-space-11:64px;
--kv-space-12:80px;
--kv-space-13:100px;
--kv-space-14:120px;
--kv-space-15:160px;

/* ---- Layout ---- */
--kv-container:1270px;
--kv-gutter:20px;
--kv-nav-gap:46px;
--kv-rail-inset:40px;
--kv-header-height:150px;
--kv-section-y:120px;
--kv-section-y-tight:80px;

/* ---- Component metrics ---- */
--kv-control-height:70px;
--kv-control-height-sm:48px;
--kv-control-height-hero:56px;
--kv-control-px:32px;
--kv-icon-chip:64px;
--kv-icon-chip-inner:60px;
--kv-social-chip:30px;
--kv-social-gap:20px;
--kv-card-w:424px;
--kv-card-h:448px;
--kv-card-pad:40px;
--kv-card-pad-x:80px;
--kv-card-pad-y:105px;
--kv-card-medallion:62px;
--kv-tile:641px;
--kv-reel-h:620px;
--kv-reel-gap:4px;
--kv-reel-title-max:520px;
--kv-indicator-w-active:140px;
--kv-indicator-w-idle:80px;
--kv-indicator-h:3px;
}

/* =================================================== effects ==== */
:root{
/* ---- Radii: the brand is square. Nothing rounds except circular chips. ---- */
--kv-radius-none:0px;
--kv-radius-pill:999px;
--kv-radius-circle:50%;

/* ---- Borders ---- */
--kv-border-width:1px;
--kv-border-width-hairline:1px;
--kv-border-width-medallion:2px;
--kv-border-width-field:3px;
--kv-border-width-indicator:3px;

/* ---- Shadow: the source uses none. Depth comes from flat colour blocks. ---- */
--kv-shadow-none:none;
--kv-shadow-lift:0 20px 40px rgba(16,16,16,.12);

/* ---- Motion ---- */
--kv-duration-fast:150ms;
--kv-duration:250ms;
--kv-duration-slow:400ms;
--kv-ease:cubic-bezier(.25,.46,.45,.94);
--kv-ease-out:cubic-bezier(0,0,.2,1);

/* ---- Overlays ---- */
--kv-overlay-photo:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.302) 100%);
--kv-overlay-panel:linear-gradient(180deg,rgba(16,16,16,0) 30%,rgba(16,16,16,.85) 100%);
--kv-overlay-panel-idle:rgba(16,16,16,.55);
--kv-overlay-accent:linear-gradient(180deg,rgba(255,219,88,0) 0%,rgba(255,219,88,.302) 100%);
}