/* =========================================================================
   RICEBAR — Colors & Type
   Foundational tokens. Import this anywhere you need brand styles:
     <link rel="stylesheet" href="/colors_and_type.css">
   ========================================================================= */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Hind";
  src: url("./fonts/Hind-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hind";
  src: url("./fonts/Hind-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("./fonts/Figtree-Variable.ttf") format("truetype-variations"),
       url("./fonts/Figtree-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Abril Fatface";
  src: url("./fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Imperial Script";
  src: url("./fonts/ImperialScript-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================================
   COLOR TOKENS
   ========================================================================= */
:root {
  /* --- Brand palette (raw) --- */
  --rb-claypot:        #6b1918;  /* deep sambal red — primary brand */
  --rb-rice:           #f7edda;  /* warm rice cream — primary surface */
  --rb-pandan:         #545d3b;  /* olive pandan — secondary */
  --rb-oat:            #c7c9b3;  /* sage oat — neutral */
  --rb-porcelain:      #c9dddb;  /* cool porcelain mint — accent */
  --rb-ink:            #000000;  /* black */

  /* --- Tints & shades (derived, manually balanced) --- */
  --rb-claypot-900:    #4a0f0e;
  --rb-claypot-700:    #6b1918;
  --rb-claypot-500:    #8e2a26;
  --rb-claypot-300:    #b86560;
  --rb-claypot-100:    #efd9d6;

  --rb-rice-50:        #fdf9ee;
  --rb-rice-100:       #f7edda;
  --rb-rice-200:       #f0e2c6;
  --rb-rice-300:       #e6d3a8;

  --rb-pandan-700:     #3b4128;
  --rb-pandan-500:     #545d3b;
  --rb-pandan-300:     #8a9270;
  --rb-pandan-100:     #d6dac7;

  --rb-oat-200:        #dedfcd;
  --rb-oat-300:        #c7c9b3;
  --rb-oat-500:        #a4a78c;

  --rb-porcelain-100:  #e1ecea;
  --rb-porcelain-300:  #c9dddb;
  --rb-porcelain-500:  #9bbfbb;

  --rb-ink-900:        #0a0a09;
  --rb-ink-700:        #2a2826;
  --rb-ink-500:        #4f4b46;
  --rb-ink-300:        #8a857d;

  /* --- Semantic surfaces --- */
  --bg:                var(--rb-rice-100);    /* default app/page bg */
  --bg-elevated:       #ffffff;
  --bg-sunken:         var(--rb-rice-200);
  --bg-inverse:        var(--rb-claypot-700);

  --surface:           #ffffff;
  --surface-warm:      var(--rb-rice-50);
  --surface-cool:      var(--rb-porcelain-100);

  /* --- Foreground (text) --- */
  --fg1:               var(--rb-ink-900);     /* primary text */
  --fg2:               var(--rb-ink-700);     /* secondary */
  --fg3:               var(--rb-ink-500);     /* tertiary / meta */
  --fg-muted:          var(--rb-ink-300);
  --fg-inverse:        var(--rb-rice-100);
  --fg-brand:          var(--rb-claypot-700);
  --fg-accent:         var(--rb-pandan-500);

  /* --- Borders / lines --- */
  --line:              rgba(10, 10, 9, 0.10);
  --line-strong:       rgba(10, 10, 9, 0.22);
  --line-inverse:      rgba(247, 237, 218, 0.18);

  /* --- Semantic state colors --- */
  --success:           #4a7a3a;
  --warning:           #c98a2b;
  --danger:            var(--rb-claypot-500);
  --info:              var(--rb-porcelain-500);

  /* --- Focus ring --- */
  --focus-ring:        0 0 0 3px rgba(107, 25, 24, 0.28);
}

/* =========================================================================
   TYPE TOKENS
   ========================================================================= */
:root {
  /* Families */
  --font-headline:     "Hind", "Helvetica Neue", Arial, sans-serif;   /* bold headlines */
  --font-h1:           "Hind", "Helvetica Neue", Arial, sans-serif;   /* semibold */
  --font-h2:           "Figtree", "Helvetica Neue", Arial, sans-serif;/* medium */
  --font-body:         "Figtree", "Helvetica Neue", Arial, sans-serif;/* regular */
  --font-display-alt:  "Abril Fatface", Georgia, serif;               /* occasional editorial */
  --font-script:       "Imperial Script", "Snell Roundhand", cursive; /* signature accents only */
  --font-poppins:      "Poppins", "Helvetica Neue", Arial, sans-serif;/* alt sans (signage) */

  /* Weights */
  --w-regular:         400;
  --w-medium:          500;
  --w-semibold:        600;
  --w-bold:            700;

  /* Type scale (modular ~1.2) */
  --t-display: clamp(48px, 6vw, 88px);
  --t-h1:      clamp(36px, 4vw, 56px);
  --t-h2:      clamp(26px, 2.6vw, 36px);
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-eyebrow:0.16em;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows — warm, soft, never harsh black */
  --shadow-1: 0 1px 2px rgba(74, 15, 14, 0.06), 0 1px 1px rgba(74,15,14,0.04);
  --shadow-2: 0 4px 12px rgba(74, 15, 14, 0.08);
  --shadow-3: 0 10px 28px rgba(74, 15, 14, 0.10);
  --shadow-4: 0 24px 56px rgba(74, 15, 14, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(10,10,9,0.06);
}

/* =========================================================================
   BASE / SEMANTIC ELEMENTS
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.headline, h1.headline, .t-headline {
  font-family: var(--font-headline);
  font-weight: var(--w-bold);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
}

h1, .t-h1 {
  font-family: var(--font-h1);
  font-weight: var(--w-semibold);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg1);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-h2);
  font-weight: var(--w-medium);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-h2);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg2);
  margin: 0;
}

small, .t-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

.t-micro {
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--fg3);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}

.editorial {
  font-family: var(--font-display-alt);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Selection */
::selection {
  background: var(--rb-claypot-700);
  color: var(--rb-rice-100);
}