/*
 * Tribu Indé — Design Tokens
 * colors_and_type.css
 *
 * Import this file + the fonts to get all CSS variables for the brand.
 */

/* ─── Font Faces ─── */
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Roobert';
  src: url('./fonts/Roobert-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'MonumentExtended';
  src: url('./fonts/MonumentExtended-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'MonumentExtended';
  src: url('./fonts/MonumentExtended-Ultrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

/* ─── Color Primitives ─── */
:root {
  --color-blue:          #0000FF;
  --color-blue-hover:    #0000B2;
  --color-yellow:        #FEF000;
  --color-dark:          #1A1A1A;
  --color-dark-2:        #262626;
  --color-dark-3:        #333333;
  --color-mid-gray:      #808080;
  --color-light:         #F0F0F0;
  --color-beige:         #F2F0ED;
  --color-beige-mid:     #DFD AD3; /* dividers, borders */
  --color-beige-mid:     #DFDAD3;
  --color-white:         #FFFFFF;
  --color-black:         #000000;

  /* Accent / UI states */
  --color-red:           #EB1D0F;
  --color-orange:        #FFA548;
  --color-yellow-soft:   #FFE764;
  --color-blue-soft:     #E5F0FF;

  /* Shadows */
  --shadow-sm:   0px 4px 23px 0px rgba(0,0,0,0.3);
  --shadow-card: 0px 2px 8px 0px rgba(0,0,0,0.08);

  /* ─── Semantic Colors ─── */
  --fg-primary:          var(--color-dark);
  --fg-secondary:        var(--color-mid-gray);
  --fg-inverted:         var(--color-white);
  --bg-page:             var(--color-beige);
  --bg-card:             var(--color-white);
  --bg-card-tinted:      var(--color-beige);
  --bg-dark:             var(--color-dark);
  --accent-primary:      var(--color-blue);
  --accent-secondary:    var(--color-yellow);
  --border-default:      var(--color-beige-mid);
  --border-strong:       var(--color-dark);

  /* ─── Typography Scale ─── */
  --font-display:   'MonumentExtended', sans-serif;
  --font-body:      'Roobert', sans-serif;

  /* Size scale */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   46px;
  --text-5xl:   56px;
  --text-6xl:   62px;
  --text-hero:  88px;
  --text-display: 178px;

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Border Radius ─── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ─── Component Sizing ─── */
  --btn-height-sm: 33px;
  --btn-height-md: 40px;
  --btn-height-lg: 62px;
}

/* ─── Semantic Typography Roles ─── */

/* Display headline — Monument Extended */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Section headline */
.t-h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1;
}

.t-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.1;
}

.t-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.2;
}

/* Body — SemiBold variant */
.t-body-strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.5;
}

/* Body — Regular */
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.5;
}

/* Small label */
.t-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Caption */
.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--fg-secondary);
}