/* ============================================================
   Bilge Ozan Deveci — Design System
   colors_and_type.css
   A near-black, warm-dark canvas where the WORK is the hero.
   UI recedes; type is warm cream; a single amber accent glows.
   ============================================================ */

/* ---- Fonts ----
   Saans family = self-hosted brand fonts (TRIAL). Patrick Hand (handwriting
   annotations) is the one remaining substitution — loaded from CDN. */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

/* Saans — primary sans (static weights) */
@font-face { font-family:'Saans'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-Light.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:300; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-LightItalic.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-Regular.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-RegularItalic.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-Medium.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:500; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-MediumItalic.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-SemiBold.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:600; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-SemiBoldItalic.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-Bold.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-BoldItalic.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Saans-TRIAL-Heavy.otf') format('opentype'); }
@font-face { font-family:'Saans'; font-weight:800; font-style:italic; font-display:swap; src:url('fonts/Saans-TRIAL-HeavyItalic.otf') format('opentype'); }

/* Saans Mono — monospace (numerals, labels, code) */
@font-face { font-family:'Saans Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/SaansMono-TRIAL-Regular.otf') format('opentype'); }
@font-face { font-family:'Saans Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/SaansMono-TRIAL-Medium.otf') format('opentype'); }
@font-face { font-family:'Saans Mono'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/SaansMono-TRIAL-SemiBold.otf') format('opentype'); }
@font-face { font-family:'Saans Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/SaansMono-TRIAL-Bold.otf') format('opentype'); }

:root {
  /* ============================================================
     1. PALETTE — raw tokens
     ============================================================ */

  /* Canvas — near-black, faintly warm */
  --ink-900: #000000;   /* pure black — deepest stage */
  --ink-850: #050608;   /* page background */
  --ink-800: #06080c;   /* glass card base */
  --ink-750: #090b0c;   /* raised surface / card fill */
  --ink-700: #121316;   /* hairline-lifted surface */
  --ink-650: #1a1916;   /* warm shadow / floor */
  --ink-600: #26241f;   /* warm mid (stage gradient) */

  /* Cream — warm off-whites (foreground) */
  --cream-50:  #fff7e3;  /* brightest heading cream */
  --cream-100: #f3ece0;  /* soft cream */
  --cream-200: #e5d9cf;  /* primary cream text */
  --cream-300: #cdc4bb;  /* secondary cream */
  --gray-400:  #8a857e;  /* muted body gray (warm) */
  --gray-500:  #6b665f;  /* tertiary / captions */
  --gray-600:  #4a4640;  /* disabled / faint */

  /* Accent — single warm amber/coral glow */
  --amber-400: #ef814f;  /* primary accent (Claude-star coral) */
  --amber-300: #f6a070;  /* hover / lighter glow */
  --amber-500: #d96a3a;  /* pressed / deeper */
  --amber-glow: rgba(239, 129, 79, 0.22); /* ambient stage glow */

  /* Kraft — sticky-note tan (annotations) */
  --kraft-300: #cda878;
  --kraft-400: #b88f5f;
  --kraft-500: #97724a;

  /* Light surfaces — cream cards (product imagery / inverse) */
  --surface-cream: #f6e0c8;
  --surface-paper: #fff7e3;

  /* Semantic — muted, reserved (used inside product mockups) */
  --pos-500: #6f7a4a;   /* muted olive — positive */
  --pos-400: #8a9a5c;
  --neg-500: #8a1709;   /* muted brick — negative */
  --neg-400: #b8624f;

  /* Lines & glass */
  --line-soft: rgba(255, 247, 227, 0.07);   /* hairline divider */
  --line-mid:  rgba(255, 247, 227, 0.12);   /* card border */
  --line-strong: rgba(255, 247, 227, 0.20); /* hover border */
  --glass-fill: rgba(255, 247, 227, 0.025); /* frosted card tint */
  --glass-stroke: rgba(255, 247, 227, 0.10);

  /* ============================================================
     2. SEMANTIC COLOR ROLES
     ============================================================ */
  --bg:        var(--ink-850);
  --bg-stage:  var(--ink-900);
  --surface-1: var(--ink-750);
  --surface-2: var(--ink-700);
  --glass:     var(--glass-fill);

  --fg:        #ffffff;           /* headings on dark — white, not cream/yellow */
  --fg-1:      var(--cream-200);  /* primary body */
  --fg-2:      var(--gray-400);   /* secondary */
  --fg-3:      var(--gray-500);   /* tertiary / meta */
  --fg-inverse: var(--ink-850);   /* text on cream surfaces */

  --accent:    var(--amber-400);
  --accent-hover: var(--amber-300);
  --accent-press: var(--amber-500);

  --border:    var(--line-mid);
  --border-soft: var(--line-soft);
  --border-strong: var(--line-strong);

  /* ============================================================
     3. TYPE — families
     ============================================================ */
  --font-sans: 'Saans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Saans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-hand: 'Patrick Hand', 'Saans', cursive;  /* annotations / sticky notes */

  /* Type scale (1.0 = 16px). Display-led, generous. */
  --text-display: clamp(3.5rem, 8vw, 7rem);   /* hero "PORTFOLIO" scale */
  --text-h1: clamp(2.25rem, 4vw, 3.25rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: 1.5rem;     /* 24 */
  --text-h4: 1.25rem;    /* 20 */
  --text-lg: 1.125rem;   /* 18 */
  --text-body: 1rem;     /* 16 */
  --text-sm: 0.875rem;   /* 14 */
  --text-xs: 0.8125rem;  /* 13 */
  --text-micro: 0.6875rem;/* 11 — index numbers / eyebrow */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* eyebrows / labels */
  --tracking-wider: 0.18em;    /* uppercase project tags */

  /* ============================================================
     4. SPACING — 4px base
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============================================================
     5. RADII — soft, restrained
     ============================================================ */
  --radius-sm: 6px;
  --radius-md: 12px;     /* default card / glass panel */
  --radius-lg: 18px;     /* large project tile */
  --radius-xl: 24px;
  --radius-pill: 999px;  /* CTA pills */

  /* ============================================================
     6. SHADOWS & GLOW — depth comes from light, not boxes
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px rgba(239,129,79,0.25), 0 8px 40px -8px rgba(239,129,79,0.35);
  --glow-spot: radial-gradient(60% 50% at 50% 0%, var(--amber-glow), transparent 70%);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply on a .ds-scope wrapper
   ============================================================ */
.ds-scope {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-scope h1, .ds-h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-scope h2, .ds-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-scope h3, .ds-h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ds-scope p, .ds-body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Eyebrow / label — uppercase, tracked, with a leading dot */
.ds-eyebrow {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Index number — the "01 / 06" project markers (brand mono) */
.ds-index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-3);
}

/* Handwritten annotation (sticky note voice) */
.ds-hand {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-850);
}

/* ============================================================
   CTAs — non-pill, editorial. Two forms:
   1) .ds-cta         link with an underline that sweeps in
   2) .ds-cta--frame  crop-mark corners that expand to a full
                      hairline frame on hover (print-reg motif)
   The arrow (.cta-arrow) nudges right on hover.
   ============================================================ */
.ds-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 1px;
  border: none;
  background: none;
  color: var(--fg);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.ds-cta .cta-arrow {
  font-size: 15px; line-height: 1; display: inline-block;
  transition: transform var(--dur-mid) var(--ease-out);
}
.ds-cta::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0;
  height: 1px; background: var(--fg);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.ds-cta:hover::after { transform: scaleX(1); }
.ds-cta:hover .cta-arrow { transform: translateX(5px); }

/* Framed / primary — registration-mark corners */
.ds-cta--frame {
  padding: 15px 24px;
  gap: 12px;
}
.ds-cta--frame::after { content: none; }
.ds-cta--frame .frame-c {
  position: absolute; width: 11px; height: 11px; pointer-events: none;
  transition: width var(--dur-mid) var(--ease-out),
              height var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.ds-cta--frame .frame-c.tl { top: 0; left: 0; border-top: 1.5px solid var(--border-strong); border-left: 1.5px solid var(--border-strong); }
.ds-cta--frame .frame-c.br { bottom: 0; right: 0; border-bottom: 1.5px solid var(--border-strong); border-right: 1.5px solid var(--border-strong); }
.ds-cta--frame:hover .frame-c { width: 100%; height: 100%; border-color: var(--cream-200); }
.ds-cta--frame:hover .cta-arrow { transform: translateX(5px); }