/* ============================================================
   TAPO — Colors & Type
   Foundation CSS variables + semantic utility classes
   ============================================================ */

@font-face {
  font-family: 'Cliona';
  src: url('fonts/Cliona.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Raleway — loaded from Google Fonts (brand-approved family).
   If running offline, download Raleway (all weights, Light→Black)
   into /fonts/ and swap this @import for local @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,700;1,800&display=swap');

:root {
  /* -----------------------------------------------------------
     BRAND COLORS — from the Tapo Brandbook
     ----------------------------------------------------------- */
  --tapo-indigo: #424E9B;        /* Indigo Monument  — primary */
  --tapo-amber: #E2943F;         /* Spiced Amber     — accent (mangkuk tingkat handle) */
  --tapo-porcelain: #FADAC7;     /* Blush Porcelain  — soft neutral */
  --tapo-black: #221F20;         /* Off-black        — type + outlines */
  --tapo-white: #FFFFFF;

  /* -----------------------------------------------------------
     INDIGO MONUMENT — 10% → 100% opacity steps (brandbook p.18)
     Mixed against white so they work as solid fills, not alpha.
     ----------------------------------------------------------- */
  --indigo-10: #ECEDF5;
  --indigo-20: #D9DCEB;
  --indigo-30: #C6CAE1;
  --indigo-40: #B3B8D7;
  --indigo-50: #A1A7CD;
  --indigo-60: #8E95C3;
  --indigo-70: #7B83B9;
  --indigo-80: #6872AF;
  --indigo-90: #5560A5;
  --indigo-100: #424E9B;

  /* SPICED AMBER steps */
  --amber-10: #FCEFE2;
  --amber-20: #F8DFC5;
  --amber-30: #F5CFA8;
  --amber-40: #F1BF8B;
  --amber-50: #EEAF6F;
  --amber-60: #EAA052;
  --amber-70: #E79035;
  --amber-80: #E2943F;
  --amber-90: #CD7F2C;
  --amber-100: #B56C1F;

  /* BLUSH PORCELAIN steps */
  --porcelain-10: #FEF8F4;
  --porcelain-20: #FDF1E9;
  --porcelain-30: #FCEADE;
  --porcelain-40: #FBE4D2;
  --porcelain-50: #FADAC7;  /* base */
  --porcelain-60: #F5CAAF;
  --porcelain-70: #F0BA97;
  --porcelain-80: #EBA97F;
  --porcelain-90: #E69967;
  --porcelain-100: #E18950;

  /* -----------------------------------------------------------
     SEMANTIC — foreground / background / border
     ----------------------------------------------------------- */
  --fg-1: var(--tapo-black);              /* primary text */
  --fg-2: #4A4649;                        /* secondary text */
  --fg-3: #7A7578;                        /* tertiary/caption */
  --fg-inverse: var(--tapo-white);
  --fg-brand: var(--tapo-indigo);
  --fg-accent: var(--tapo-amber);

  --bg-canvas: var(--tapo-white);         /* default page */
  --bg-soft: var(--porcelain-20);         /* warm soft surface */
  --bg-warm: var(--tapo-porcelain);       /* hero / card backgrounds */
  --bg-brand: var(--tapo-indigo);         /* deep brand surface */
  --bg-accent: var(--tapo-amber);         /* highlight surfaces */
  --bg-ink: var(--tapo-black);

  --border-soft: rgba(34, 31, 32, 0.08);
  --border-med: rgba(34, 31, 32, 0.16);
  --border-strong: var(--tapo-black);

  /* -----------------------------------------------------------
     TYPOGRAPHY — brand families
     ----------------------------------------------------------- */
  --font-display: 'Cliona', 'Caveat', 'Brush Script MT', cursive;  /* LOGOTYPE ONLY */
  --font-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Hierarchy (from brandbook p.24) — sizes in px, tracking in em */
  --fs-headline: 35px;          --lh-headline: 30px;     --tr-headline: -0.01em;
  --fs-subtitle: 17.5px;        --lh-subtitle: 17.5px;   --tr-subtitle: -0.01em;
  --fs-cta:      15px;          --lh-cta: 1.2;           --tr-cta: 0;
  --fs-body:     12px;          --lh-body: 1.55;         --tr-body: 0;

  /* Extended scale for larger UI surfaces (decks, hero, web) */
  --fs-hero: 72px;
  --fs-h1:   48px;
  --fs-h2:   32px;
  --fs-h3:   22px;
  --fs-lead: 18px;
  --fs-small: 11px;

  /* -----------------------------------------------------------
     SPACING, RADII, SHADOW
     ----------------------------------------------------------- */
  --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;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Kraft / paper-packaging feel: soft, warm, low-spread shadows */
  --shadow-sm: 0 1px 2px rgba(34, 31, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(34, 31, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(34, 31, 32, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(34, 31, 32, 0.08);
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */

.tapo-logotype {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--tapo-indigo);
}

.tapo-hero {
  font-family: var(--font-sans);
  font-weight: 900;            /* Raleway Black */
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.tapo-h1, h1.tapo {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.tapo-h2, h2.tapo {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.tapo-h3, h3.tapo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.tapo-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-subtitle);
  line-height: var(--lh-subtitle);
  letter-spacing: var(--tr-subtitle);
  color: var(--fg-2);
}

.tapo-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.tapo-body, p.tapo {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.tapo-cta {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-cta);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tapo-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Italic allowed ONLY for foreign words / quotes per brandbook p.23 */
.tapo-foreign {
  font-style: italic;
  font-weight: 500;
}