/* ============================================================
   Renksan Design System — Colors & Type
   ============================================================
   Renksan A.Ş. — Esnek Ambalaj Mürekkep Üretimi
   (Flexible Packaging Printing Ink Manufacturer)

   Foundations derived from:
   - Renksan corporate wordmark (deep crimson red, italic serif)
   - Printor product wordmark (warm gold/brown italic script, CMYK accent)
   - Industrial facility photography (white epoxy floors, steel,
     safety yellow bars, blue drums, gold ink pails)
   ============================================================ */

/* -----------------------------------------------------------
   FONTS
   ----------------------------------------------------------- */
/* Substitutions noted in README — final logo wordmarks are
   custom-drawn, but for headings/body we use Google Fonts
   that match the spirit of the brand:
   - Playfair Display: italic serif for display (echoes the
     italic serif Renksan + Printor logos)
   - Inter: clean neutral sans for body / UI (industrial,
     legible at small sizes — Renksan's facility signage uses
     similar geometric sans letterforms)
   - IBM Plex Mono: spec sheets, lot numbers, CMYK values
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     BRAND COLORS
     ========================================================= */

  /* --- Renksan Red (primary corporate) ---
     Sampled directly from the renksan® wordmark. A deep,
     slightly cool crimson — confident, industrial, ink-like. */
  --renksan-red-50:  #FDF2F2;
  --renksan-red-100: #FADBDB;
  --renksan-red-200: #F4B5B5;
  --renksan-red-300: #E97F7F;
  --renksan-red-400: #D44E4F;
  --renksan-red-500: #B82B2C;   /* ★ brand red — logo value */
  --renksan-red-600: #A22425;
  --renksan-red-700: #831C1D;
  --renksan-red-800: #5E1314;
  --renksan-red-900: #3E0C0D;

  /* --- Printor Gold (product / sub-brand) ---
     Warm metallic gold-brown from Printor wordmark + ink pail. */
  --printor-gold-50:  #FBF6EC;
  --printor-gold-100: #F3E6C6;
  --printor-gold-200: #E6CD8E;
  --printor-gold-300: #D4B062;
  --printor-gold-400: #B89146;
  --printor-gold-500: #997636;   /* ★ printor wordmark */
  --printor-gold-600: #7C5E2A;
  --printor-gold-700: #5E4720;
  --printor-gold-800: #423217;
  --printor-gold-900: #2A200E;

  /* --- Process Inks (CMYK accent — pulled from Printor's
         signature "o" rainbow swoosh + reality of the product). */
  --ink-cyan:     #00A7E1;
  --ink-magenta:  #E5007D;
  --ink-yellow:   #FFD200;
  --ink-key:      #111111;   /* K — true black ink */

  /* --- Industrial Neutrals (factory palette) --- */
  --neutral-0:    #FFFFFF;   /* epoxy floor highlight */
  --neutral-50:   #F7F7F5;   /* facade off-white */
  --neutral-100:  #EFEFEC;
  --neutral-200:  #E2E2DE;
  --neutral-300:  #C9C9C4;
  --neutral-400:  #A8A8A2;
  --neutral-500:  #82827C;
  --neutral-600:  #5E5E59;
  --neutral-700:  #3E3E3A;
  --neutral-800:  #25252A;   /* press equipment dark */
  --neutral-900:  #141416;

  /* --- Safety / Functional accents (from facility) --- */
  --safety-yellow: #F2C200;   /* yellow railings & floor stripe */
  --safety-blue:   #1E3A8A;   /* ink drum blue */

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --color-bg:           var(--neutral-0);
  --color-bg-subtle:    var(--neutral-50);
  --color-bg-muted:     var(--neutral-100);
  --color-bg-inverse:   var(--neutral-900);

  --color-surface:      var(--neutral-0);
  --color-surface-alt:  var(--neutral-50);

  --color-fg:           var(--neutral-900);     /* primary text */
  --color-fg-2:         var(--neutral-700);     /* body */
  --color-fg-3:         var(--neutral-500);     /* secondary */
  --color-fg-4:         var(--neutral-400);     /* tertiary / meta */
  --color-fg-inverse:   var(--neutral-0);

  --color-border:       var(--neutral-200);
  --color-border-strong:var(--neutral-300);
  --color-divider:      var(--neutral-100);

  --color-accent:       var(--renksan-red-500);
  --color-accent-hover: var(--renksan-red-600);
  --color-accent-press: var(--renksan-red-700);
  --color-accent-soft:  var(--renksan-red-50);
  --color-accent-on:    var(--neutral-0);

  --color-link:         var(--renksan-red-600);
  --color-link-hover:   var(--renksan-red-700);

  --color-success:      #2F7A3A;
  --color-warning:      var(--safety-yellow);
  --color-danger:       var(--renksan-red-500);
  --color-info:         var(--ink-cyan);

  /* =========================================================
     TYPOGRAPHY — BASE FAMILIES
     ========================================================= */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

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

  /* Type scale (modular, 1.250 ratio, base 16) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;   /* eyebrow / category labels */

  /* =========================================================
     SPACING — 4px grid
     ========================================================= */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* =========================================================
     RADII — restrained / industrial.
     The brand reads as engineered, not soft.
     ========================================================= */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — subtle, photographic. Not material design.
     ========================================================= */
  --shadow-xs: 0 1px 1px rgba(20, 20, 22, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 22, 0.06), 0 1px 1px rgba(20, 20, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 22, 0.08), 0 2px 4px rgba(20, 20, 22, 0.05);
  --shadow-lg: 0 16px 32px rgba(20, 20, 22, 0.10), 0 4px 8px rgba(20, 20, 22, 0.06);
  --shadow-xl: 0 28px 56px rgba(20, 20, 22, 0.14), 0 8px 16px rgba(20, 20, 22, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-narrow: 720px;
  --container:        1100px;
  --container-wide:   1320px;

  /* =========================================================
     MOTION — slow, considered, never bouncy.
     B2B / industrial: confident, not playful.
     ========================================================= */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — hero / section openers. Italic serif echoes wordmarks. */
.display-1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-black);
  font-size: clamp(var(--fs-56), 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}
.display-2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Headings */
.h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0;
}
.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Eyebrow / category label — small caps, wide tracking.
   Used everywhere on the corporate site above section titles. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Body */
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}
.body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
  text-wrap: pretty;
}
.body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-fg-3);
}

/* Meta / caption — used for product specs, dates, locations */
.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg-3);
}

/* Mono — for SKUs, lot codes, CMYK values, technical specs */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
  color: var(--color-fg-2);
}

/* Link */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Selection — branded */
::selection {
  background: var(--renksan-red-500);
  color: var(--neutral-0);
}