/* ============================================================
   tokens.css
   Shared design tokens for the Derin Suer portfolio.
   Anatolian palette + Iznik-tile motif system.
   Import this BEFORE any page-specific stylesheet.
   ============================================================ */

:root {
  /* ---- Anatolian palette --------------------------------- */
  --clay: #c1552b;          /* terracotta — primary accent */
  --clay-deep: #9c4220;      /* pressed / hover state of clay */
  --copper: #a5682e;         /* secondary warm accent */
  --turquoise: #0b6e64;      /* deep Iznik turquoise */
  --turquoise-bright: #1c9c90;
  --cobalt: #1e4c6b;         /* used sparingly — Iznik cobalt */
  --cream: #f2e9d8;          /* warm cream surface */
  --cream-soft: #e9ddc4;
  --ink: #221a13;            /* warm near-black, not pure #111 */
  --ink-soft: #3d3226;
  --ink-faint: rgba(34, 26, 19, 0.62);

  /* ---- Surfaces -------------------------------------------- */
  --surface-glass: rgba(34, 26, 19, 0.46);
  --surface-glass-light: rgba(242, 233, 216, 0.86);
  --surface-card: #fbf6ea;
  --border-hairline: rgba(34, 26, 19, 0.14);

  /* ---- Type --------------------------------------------------
     Display: Fraunces — a serif with real optical character.
     Body/UI: Manrope — clean geometric sans for legibility.
  */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  /* ---- Radii & spacing rhythm -------------------------------- */
  --radius-tile: 3px;   /* tiles are square-ish, not pill-rounded */
  --radius-soft: 14px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;

  /* ---- Motion ------------------------------------------------ */
  --ease-tile: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Iznik star-and-cross tile motif, as a tileable SVG strip.
   Used as a repeating background-image border on sections,
   cards and the nav — never as full-bleed wallpaper (that
   reads busy). Two colorways: clay-on-cream, turquoise-on-ink.
   ============================================================ */

:root {
  --tile-strip-clay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c1552b' stroke-width='1.4'%3E%3Cpath d='M20 2 L26 12 L38 12 L29 20 L34 32 L20 25 L6 32 L11 20 L2 12 L14 12 Z'/%3E%3C/g%3E%3C/svg%3E");
  --tile-strip-turquoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%231c9c90' stroke-width='1.4'%3E%3Cpath d='M20 2 L26 12 L38 12 L29 20 L34 32 L20 25 L6 32 L11 20 L2 12 L14 12 Z'/%3E%3C/g%3E%3C/svg%3E");
  --tile-strip-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23f2e9d8' stroke-opacity='0.55' stroke-width='1.4'%3E%3Cpath d='M20 2 L26 12 L38 12 L29 20 L34 32 L20 25 L6 32 L11 20 L2 12 L14 12 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.tile-edge {
  height: 10px;
  width: 100%;
  background-image: var(--tile-strip-clay);
  background-repeat: repeat-x;
  background-size: 24px 10px;
  background-position: center;
  opacity: 0.9;
}

.tile-edge--turquoise { background-image: var(--tile-strip-turquoise); }
.tile-edge--cream { background-image: var(--tile-strip-cream); }

/* Small eight-point star corner mark, used as a single accent
   (not a repeated grid — one mark per element keeps it a detail
   rather than wallpaper). */
.tile-mark {
  --size: 18px;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%23c1552b' d='M20 2 L24.5 15.5 L38 20 L24.5 24.5 L20 38 L15.5 24.5 L2 20 L15.5 15.5 Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
}

a { color: inherit; }

/* Respect reduced-motion preferences across every component
   that uses transitions/animations defined in the other files. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus, styled to match the palette instead
   of the browser default blue ring. */
:focus-visible {
  outline: 2px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Shared button shape (color variants live per-page) ------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-tile), background 0.2s var(--ease-tile);
}
.btn:hover { transform: translateY(-2px); }