/* =========================================================================
   ASRA TREND — colors & type tokens
   Source: ASRA TREND KURUMSAL KİMLİK KATALOĞU.pdf (corporate identity book)
   Brand category: Home & lifestyle furniture / decoration
   ========================================================================= */

@font-face {
  font-family: "D-DIN";
  src: url("/landing-assets/fonts/D-DIN.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("/landing-assets/fonts/D-DIN-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("/landing-assets/fonts/D-DIN-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("/landing-assets/fonts/D-DINCondensed.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Condensed";
  src: url("/landing-assets/fonts/D-DINCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Exp";
  src: url("/landing-assets/fonts/D-DINExp.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Exp";
  src: url("/landing-assets/fonts/D-DINExp-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "D-DIN Exp";
  src: url("/landing-assets/fonts/D-DINExp-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-orange: #F25C05;
  --brand-orange-soft: #F58026;
  --brand-orange-deep: #C94705;

  --brand-pink: #E5186A;
  --brand-pink-soft: #ED5A93;
  --brand-pink-deep: #B40E50;

  --brand-purple: #5C2D91;
  --brand-purple-soft: #8056B5;
  --brand-purple-deep: #3D1A6B;

  --brand-blue: #1E22AA;
  --brand-blue-deep: #141880;

  --black:        #0A0A0A;
  --ink:          #1A1A1A;
  --ink-2:        #3A3A3A;
  --ink-3:        #6B6B6B;
  --ink-4:        #9A9A9A;
  --line:         #E5E5E5;
  --line-2:       #EFEFEF;
  --paper:        #FAFAFA;
  --white:        #FFFFFF;

  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --fg-on-color: var(--white);

  --bg-1: var(--white);
  --bg-2: var(--paper);
  --bg-3: #F2F2F2;
  --bg-inverse: var(--ink);

  --border-1: var(--line);
  --border-2: var(--line-2);
  --border-strong: var(--ink);

  --gradient-brand:
    linear-gradient(90deg, #5C2D91 0%, #B62E89 35%, #E5186A 60%, #F25C05 100%);
  --gradient-cool:
    linear-gradient(135deg, #5C2D91 0%, #1E22AA 100%);
  --gradient-hot:
    linear-gradient(135deg, #E5186A 0%, #F25C05 100%);

  --font-display:    "D-DIN", "Helvetica Neue", Arial, sans-serif;
  --font-body:       "D-DIN", "Helvetica Neue", Arial, sans-serif;
  --font-condensed:  "D-DIN Condensed", "D-DIN", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --font-expanded:   "D-DIN Exp", "D-DIN", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display-xl: clamp(56px, 7.5vw, 112px);
  --fs-display:    clamp(40px, 5vw,   72px);
  --fs-h1:         clamp(32px, 3.6vw, 48px);
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-loose:      1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-overline: 0.18em;

  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-2: 0 4px 14px rgba(10,10,10,0.08);
  --shadow-3: 0 14px 38px rgba(10,10,10,0.12);
  --shadow-color: 0 12px 28px -8px rgba(92,45,145,0.35);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}