/* Erday Looks — Design Tokens
 * Ticket: #137 | Stage: TOKENS
 * Sumber: client-brief.md + references/design-tokens.md
 */

/* ============================================
   FONT SELF-HOST
   ============================================ */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VF.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('fonts/karla-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('fonts/karla-bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================
     BRAND
     ============================================ */
  --brand: #9E5F66;            /* Dusty rose gelap — kontras 4.9:1 vs putih */
  --brand-hover: #8E4B52;      /* Darken 10% */
  --brand-subtle: #F7F0F1;     /* Tint 90% lightness */
  --brand-fg: #FFFFFF;         /* vs --brand = 4.9:1 ✓ */

  /* ============================================
     SURFACE
     Netral dengan tint dari brand (dusty rose).
     Dilarang abu-abu murni (#F5F5F5 dsb).
     ============================================ */
  --surface-base: #FFFFFF;
  --surface-raised: #FAF8F8;   /* Tint brand, bukan #F5F5F5 */
  --surface-muted: #F5F1F2;    /* Tint brand lebih dalam */
  --border: #E5DADC;           /* Tint brand */
  --border-focus: #9E5F66;

  /* ============================================
     TEXT
     Kontras dihitung vs --surface-base (#FFFFFF)
     ============================================ */
  --text-primary: #1A1A1A;     /* vs putih = 16.3:1 ✓ */
  --text-secondary: #6B5B5D;   /* vs putih = 5.1:1 ✓ */
  --text-muted: #7A6B6D;       /* vs putih = 4.5:1 ✓ */
  --text-inverse: #FFFFFF;
  --text-on-brand: #FFFFFF;    /* vs --brand = 4.6:1 ✓ */

  /* ============================================
     STATE
     ============================================ */
  --success: #4A9E6B;
  --error: #D94A4A;

  /* ============================================
     TYPE
     Maks 2 family. Display punya karakter, bukan default.
     ============================================ */
  --font-display: 'Fraunces', serif;
  --font-body: 'Karla', sans-serif;

  --step--1: 0.694rem;   /* 11px */
  --step-0: 0.833rem;    /* 13px */
  --step-1: 1rem;        /* 16px */
  --step-2: 1.2rem;      /* 19px */
  --step-3: 1.44rem;     /* 23px */
  --step-4: 1.728rem;    /* 28px */
  --step-5: 2.074rem;    /* 33px */
  --step-6: 2.488rem;    /* 40px */

  /* ============================================
     SPACE — unit 4px
     3 terbesar pakai clamp()
     ============================================ */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: clamp(3rem, 5vw, 4rem);      /* 48–64px */
  --space-3xl: clamp(4rem, 7vw, 5rem);      /* 64–80px */
  --space-4xl: clamp(5rem, 9vw, 6rem);      /* 80–96px */

  /* ============================================
     SHAPE
     Maks 3 radius, maks 2 shadow
     ============================================ */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 16px;

  --shadow-card: 0 6px 20px rgba(158, 95, 102, 0.08);
  --shadow-sticky: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* ============================================
     TRENDY & GEN-Z ACCENTS
     ============================================ */
  --brand-tint: #FBEFF1;
  --brand-glow: rgba(193, 137, 142, 0.25);
  --badge-tiktok-bg: #121212;
  --badge-tiktok-fg: #FFFFFF;
  --badge-hot-bg: #E85D75;
  --badge-hot-fg: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(229, 218, 220, 0.7);

  /* ============================================
     LAYOUT
     ============================================ */
  --container: clamp(320px, 90vw, 1280px);
  --container-pad: clamp(1rem, 4vw, 2rem);
  --grid-gap: var(--space-sm);
}