/* ============================================================================
   KORKIMYA - Brand Identity Tokens (first-pass proposal)
   Single source of truth. Core hexes are lifted from the live korkimya.com
   build; the intermediate ramp tones are derived and flagged as draft.
   Intended to seed korkimya.com and the KORKIMYA ERP/CRM design systems.
   ============================================================================ */
:root {
  /* --- Primary: Corporate Navy -------------------------------------------- */
  --navy-900: #050A2E; /* Night Navy      (core, live) */
  --navy-800: #07114C; /* Corporate Navy  (core, live) - PRIMARY */
  --navy-700: #0A1666; /* Deep Blue       (core, live) */
  --navy-600: #12206B; /* Cobalt          (derived) */

  /* --- Electric Blue ------------------------------------------------------ */
  --blue-600: #0058B0; /* Sapphire        (core, live) */
  --blue-500: #0076E7; /* Electric Blue   (core, live) */
  --blue-400: #01A4E4; /* Cyan Blue       (core, live) */
  --blue-300: #5DB4FF; /* Sky             (core, live) */

  /* --- Accent: Mint ------------------------------------------------------- */
  --mint-500: #31E7DF; /* Mint            (core, live) - SIGNATURE ACCENT */
  --mint-600: #14B8B0; /* Deep Mint       (derived, for text on light) */

  /* --- Neutral ramp ------------------------------------------------------- */
  --neutral-0:   #FFFFFF; /* White        (core, live) */
  --neutral-50:  #F6F9FC; /* Mist         (core, live) */
  --neutral-200: #E2E9EF; /* Silver       (core, live) */
  --neutral-400: #9AA7B4; /* Steel        (derived) */
  --neutral-700: #38414F; /* Graphite     (derived) */
  --neutral-900: #0B0F1A; /* Carbon       (derived) */

  /* --- Semantic roles ----------------------------------------------------- */
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --ink: var(--navy-800);
  --ink-soft: color-mix(in srgb, var(--navy-800) 62%, var(--neutral-400));
  --line: color-mix(in srgb, var(--navy-800) 12%, transparent);
  --accent: var(--mint-500);

  /* --- Type --------------------------------------------------------------- */
  --font: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --shell: 1160px;

  /* --- Signature gradients ------------------------------------------------ */
  --grad-navy: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 42%, var(--blue-500) 100%);
  --grad-mint: linear-gradient(135deg, var(--blue-400) 0%, var(--mint-500) 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }

/* --- Display type: light-weight, tight tracking (house style) ------------- */
.display {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin: 0;
}
.brand-word { letter-spacing: 0.01em; } /* keep the dotted I readable */

/* --- Top bar ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 22px; border-bottom: 1px solid var(--line);
}
.topbar img { height: 26px; width: auto; }
.topbar .tag { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }

/* --- Section rhythm ------------------------------------------------------ */
section { padding-block: clamp(48px, 8vw, 96px); }
.sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; max-width: 640px; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.sec-head p { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* --- 1. Logo lockup row -------------------------------------------------- */
.lockups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lockup {
  border-radius: 18px; min-height: 190px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(7,17,76,0.04), 0 18px 40px -28px rgba(7,17,76,0.45);
}
.lockup img { height: 40px; width: auto; }
.lockup .caption {
  position: absolute; left: 16px; bottom: 14px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.lockup--navy { background: var(--grad-navy); }
.lockup--navy .caption { color: rgba(255,255,255,0.55); }
.lockup--light { background: var(--neutral-0); border: 1px solid var(--line); }
.lockup--light .caption { color: var(--ink-soft); }
.lockup--mint { background: var(--grad-mint); }
.lockup--mint .caption { color: rgba(5,10,46,0.55); }
/* Monogram lockup (CSS/SVG, no raster) */
.monogram { font-weight: 300; font-size: 92px; line-height: 1; letter-spacing: -0.04em; }
.lockup--mint .monogram { color: var(--navy-900); }

/* --- 2. Dark hero banner ------------------------------------------------- */
.hero {
  border-radius: 28px; overflow: hidden; position: relative;
  background: var(--grad-navy); color: var(--neutral-0);
  padding: clamp(48px, 8vw, 104px) clamp(28px, 6vw, 80px);
  isolation: isolate;
}
.hero svg.lattice { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; }
.hero .hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero .statement { font-size: clamp(28px, 4.6vw, 58px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; margin: 18px 0 0; }
.hero .statement .accent { color: var(--mint-500); }
.hero .statement-en { margin: 16px 0 0; color: rgba(255,255,255,0.66); font-size: clamp(15px, 1.6vw, 19px); font-weight: 400; }
.hero .rule { width: 64px; height: 3px; background: var(--mint-500); border-radius: 2px; margin-top: 34px; }

/* --- 3. Three-panel brand statement card --------------------------------- */
.trio { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; }
.panel { border-radius: 22px; padding: 34px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; }
.panel--name { background: var(--neutral-0); border: 1px solid var(--line); }
.panel--name .big { font-size: clamp(30px, 3.8vw, 44px); font-weight: 300; letter-spacing: -0.01em; }
.panel--name .meta { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.panel--tag { background: var(--grad-navy); color: var(--neutral-0); position: relative; overflow: hidden; }
.panel--tag svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
.panel--tag .z { position: relative; z-index: 1; }
.panel--tag .tag-tr { font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; }
.panel--tag .tag-en { color: rgba(255,255,255,0.66); font-size: 14px; margin-top: 8px; }
.panel--pos { background: var(--navy-800); color: var(--neutral-0); }
.panel--pos .words { display: flex; flex-direction: column; gap: 10px; }
.panel--pos .words span { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; letter-spacing: -0.01em; }
.panel--pos .words span b { font-weight: 600; color: var(--mint-500); }
.panel--pos .pos-en { color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* --- 4. Palette grid ----------------------------------------------------- */
.fam { margin-bottom: 34px; }
.fam h3 { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 14px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.swatch { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.swatch .chip { height: 108px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 10px; }
.swatch .chip .dot { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 3px 7px; border-radius: 999px; }
.swatch .meta { padding: 12px 13px 15px; }
.swatch .meta .name { font-size: 13px; font-weight: 600; }
.swatch .meta .role { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.swatch .meta .hex { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; margin-top: 9px; font-variant-numeric: tabular-nums; }
.swatch .meta .token { font-size: 10px; color: var(--neutral-400); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 2px; }
.dot--core { background: rgba(255,255,255,0.18); color: #fff; }
.dot--core.on-light { background: rgba(7,17,76,0.08); color: var(--navy-800); }
.dot--drv { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }
.dot--drv.on-light { background: rgba(7,17,76,0.06); color: var(--ink-soft); }

/* --- Type specimen + footer --------------------------------------------- */
.specimen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.specimen .aa { font-size: clamp(96px, 16vw, 200px); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; background: var(--grad-mint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.specimen .weights span { display: block; font-size: 26px; margin-bottom: 6px; }
.specimen .weights .w3 { font-weight: 300; } .specimen .weights .w4 { font-weight: 400; }
.specimen .weights .w5 { font-weight: 500; } .specimen .weights .w6 { font-weight: 600; } .specimen .weights .w7 { font-weight: 700; }
.specimen .fmeta { color: var(--ink-soft); font-size: 14px; margin-top: 14px; }

.draft-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--mint-500) 16%, transparent);
  color: var(--mint-600); border: 1px solid color-mix(in srgb, var(--mint-600) 30%, transparent);
  padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
footer { border-top: 1px solid var(--line); padding-block: 34px; color: var(--ink-soft); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
footer .brand-word { color: var(--ink); font-weight: 600; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .lockups { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .specimen { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .swatches { grid-template-columns: 1fr 1fr; }
  .topbar .tag { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .lockup, .swatch { transition: transform .2s cubic-bezier(.2,0,0,1), box-shadow .2s ease; }
  .swatch:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(7,17,76,0.5); }
}