/* =========================================================================
   Nescafé Design System — colors & type tokens
   Import this file first on every HTML deliverable:
     <link rel="stylesheet" href="path/to/colors_and_type.css">
   ========================================================================= */

/* ---------- Fonts: self-hosted --------------------------------------- */

@font-face {
  font-family: "Nescafé Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/NescafeSans-Regular.woff") format("woff"),
       url("fonts/NescafeSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Nescafé Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/NescafeSans-Bold.woff") format("woff"),
       url("fonts/NescafeSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter-Bold.ttf") format("truetype");
}

:root {
  /* =======================================================================
     COLOR
     Sampled directly from the Nescafé logo.
     ======================================================================= */

  /* Brand core */
  --ns-ink:        #2B2A29;  /* Nescafé Ink — wordmark, primary text */
  --ns-red:        #D42E12;  /* Nescafé Red — steam accent, sole brand accent */
  --ns-paper:      #FFFFFF;  /* Default surface */

  /* Warm neutrals — coffee-tinted grays, never pure cool gray */
  --ns-ink-900:    #1A1918;
  --ns-ink-800:    #2B2A29;  /* = --ns-ink */
  --ns-ink-700:    #3E3C3A;
  --ns-ink-600:    #5A5654;
  --ns-ink-500:    #787370;
  --ns-ink-400:    #9E9895;
  --ns-ink-300:    #C4BFBC;
  --ns-ink-200:    #E2DEDB;
  --ns-ink-100:    #EFEBE7;
  --ns-ink-50:     #F7F4F1;  /* Latte — default warm background */

  /* Red scale — used sparingly, for CTAs / emphasis / alerts */
  --ns-red-900:    #7A1A0A;
  --ns-red-800:    #A12411;
  --ns-red-700:    #BD280F;
  --ns-red-600:    #D42E12;  /* = --ns-red */
  --ns-red-500:    #E34B32;
  --ns-red-400:    #ED7761;
  --ns-red-300:    #F3A38F;
  --ns-red-200:    #F8C8BB;
  --ns-red-100:    #FCE6DF;
  --ns-red-50:     #FEF3EF;

  /* Coffee tones — warm brand support palette (imagery, backgrounds, accents) */
  --ns-espresso:   #3B1F13;  /* Darkest roast, almost black with warmth */
  --ns-mocha:      #5C3420;  /* Roasted bean */
  --ns-crema:      #C69A6A;  /* Crema on espresso */
  --ns-latte:      #E8D2B5;  /* Milk & coffee */
  --ns-oat:        #F3E6D2;  /* Pale, warm — large surface accent */

  /* Semantic */
  --ns-success:    #2F7D32;
  --ns-warning:    #C87A06;
  --ns-danger:     #D42E12;  /* = brand red — reuse, never invent another */
  --ns-info:       #1F5E8C;

  /* Surface tokens */
  --ns-bg:         var(--ns-paper);
  --ns-bg-alt:     var(--ns-ink-50);
  --ns-bg-dark:    var(--ns-ink);
  --ns-bg-espresso: var(--ns-espresso);
  --ns-surface:    #FFFFFF;
  --ns-border:     var(--ns-ink-200);
  --ns-border-strong: var(--ns-ink-300);

  /* Text tokens */
  --ns-fg:         var(--ns-ink);
  --ns-fg-muted:   var(--ns-ink-600);
  --ns-fg-subtle:  var(--ns-ink-500);
  --ns-fg-on-dark: var(--ns-paper);
  --ns-fg-on-dark-muted: var(--ns-ink-300);

  /* Focus ring */
  --ns-focus:      0 0 0 3px rgba(212, 46, 18, 0.35);

  /* =======================================================================
     GRADIENTS — four approved pairs. Never invent a fifth.
     ======================================================================= */
  --ns-gradient-dawn:     linear-gradient(135deg, #D42E12 0%, #F3A38F 100%);   /* Red steam */
  --ns-gradient-morning:  linear-gradient(135deg, #3B1F13 0%, #C69A6A 100%);   /* Espresso → crema */
  --ns-gradient-latte:    linear-gradient(135deg, #F3E6D2 0%, #E8D2B5 100%);   /* Oat → latte, large surfaces */
  --ns-gradient-night:    linear-gradient(135deg, #1A1918 0%, #3B1F13 100%);   /* Dark mode / hero backing */

  /* =======================================================================
     TYPOGRAPHY
     NescaféSans = display/headlines/emphasis (400, 700)
     Inter       = body, data, UI (300, 400, 500, 600, 700)
     Scale: Major Third (1.250)
     ======================================================================= */

  --ns-font-display: "Nescafé Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ns-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ns-font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Type scale — Major Third (1.250), base 16px */
  --ns-text-2xs:   0.640rem;   /* 10.2px */
  --ns-text-xs:    0.800rem;   /* 12.8px */
  --ns-text-sm:    0.875rem;   /* 14px   */
  --ns-text-base:  1.000rem;   /* 16px   */
  --ns-text-md:    1.125rem;   /* 18px   */
  --ns-text-lg:    1.250rem;   /* 20px   */
  --ns-text-xl:    1.563rem;   /* 25px   */
  --ns-text-2xl:   1.953rem;   /* 31.25px */
  --ns-text-3xl:   2.441rem;   /* 39.06px */
  --ns-text-4xl:   3.052rem;   /* 48.83px */
  --ns-text-5xl:   3.815rem;   /* 61.04px */
  --ns-text-6xl:   4.768rem;   /* 76.3px  */
  --ns-text-7xl:   5.960rem;   /* 95.4px  */

  /* Line height */
  --ns-leading-tight:   1.05;
  --ns-leading-snug:    1.2;
  --ns-leading-normal:  1.5;
  --ns-leading-loose:   1.7;

  /* Letter-spacing */
  --ns-tracking-tight:  -0.02em;
  --ns-tracking-snug:   -0.01em;
  --ns-tracking-normal: 0;
  --ns-tracking-wide:   0.04em;
  --ns-tracking-wider:  0.12em;  /* ALL-CAPS EYEBROWS */

  /* Font weights */
  --ns-weight-light:    300;
  --ns-weight-regular:  400;
  --ns-weight-medium:   500;
  --ns-weight-semibold: 600;
  --ns-weight-bold:     700;

  /* =======================================================================
     SPACING — 4px base grid
     ======================================================================= */
  --ns-space-0:   0;
  --ns-space-1:   0.25rem;  /*  4px */
  --ns-space-2:   0.5rem;   /*  8px */
  --ns-space-3:   0.75rem;  /* 12px */
  --ns-space-4:   1rem;     /* 16px */
  --ns-space-5:   1.5rem;   /* 24px */
  --ns-space-6:   2rem;     /* 32px */
  --ns-space-7:   2.5rem;   /* 40px */
  --ns-space-8:   3rem;     /* 48px */
  --ns-space-9:   4rem;     /* 64px */
  --ns-space-10:  5rem;     /* 80px */
  --ns-space-11:  6rem;     /* 96px */
  --ns-space-12:  8rem;     /* 128px */

  /* =======================================================================
     RADII — soft, never fully rounded; mug handle, not pill
     ======================================================================= */
  --ns-radius-none: 0;
  --ns-radius-xs:   2px;
  --ns-radius-sm:   4px;
  --ns-radius:      8px;   /* default */
  --ns-radius-md:   12px;
  --ns-radius-lg:   16px;
  --ns-radius-xl:   24px;
  --ns-radius-2xl:  32px;
  --ns-radius-full: 999px;

  /* =======================================================================
     SHADOWS — warm ink tone, not neutral gray
     ======================================================================= */
  --ns-shadow-xs:  0 1px 2px rgba(43, 42, 41, 0.06);
  --ns-shadow-sm:  0 2px 6px rgba(43, 42, 41, 0.08);
  --ns-shadow:     0 6px 16px rgba(43, 42, 41, 0.10);
  --ns-shadow-md:  0 12px 28px rgba(43, 42, 41, 0.12);
  --ns-shadow-lg:  0 24px 48px rgba(43, 42, 41, 0.16);
  --ns-shadow-xl:  0 40px 80px rgba(43, 42, 41, 0.20);

  /* Motion */
  --ns-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ns-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ns-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ns-duration-fast:    150ms;
  --ns-duration:         220ms;
  --ns-duration-slow:    400ms;

  /* Container */
  --ns-container:    1200px;
  --ns-container-lg: 1360px;
}

/* =======================================================================
   BASE ELEMENTS — semantic defaults
   ======================================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: var(--ns-font-sans);
  font-weight: var(--ns-weight-regular);
  font-size: var(--ns-text-base);
  line-height: var(--ns-leading-normal);
  color: var(--ns-fg);
  background: var(--ns-bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ns-font-display);
  font-weight: var(--ns-weight-bold);
  color: var(--ns-fg);
  letter-spacing: var(--ns-tracking-tight);
  line-height: var(--ns-leading-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--ns-text-5xl); }
h2 { font-size: var(--ns-text-4xl); }
h3 { font-size: var(--ns-text-3xl); }
h4 { font-size: var(--ns-text-2xl); letter-spacing: var(--ns-tracking-snug); }
h5 { font-size: var(--ns-text-xl); letter-spacing: var(--ns-tracking-snug); }
h6 { font-size: var(--ns-text-lg); letter-spacing: var(--ns-tracking-snug); }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--ns-font-sans);
  font-size: var(--ns-text-xs);
  font-weight: var(--ns-weight-semibold);
  letter-spacing: var(--ns-tracking-wider);
  text-transform: uppercase;
  color: var(--ns-red);
}

a { color: var(--ns-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ns-red); text-decoration-thickness: 2px; }

::selection { background: var(--ns-red); color: var(--ns-paper); }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }