/* ============================================================
   GOMATI ENTERPRISES — Colors & Typography
   Source: Montserrat Variable Font (local)
   Brand orange extracted from official logo (#F99B04)
   ============================================================ */

/* ── Webfonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Raw Color Palette ────────────────────────────────────── */
:root {
  /* Orange scale */
  --color-orange-50:  #FFF6E0;
  --color-orange-100: #FFE8A3;
  --color-orange-200: #FFD366;
  --color-orange-300: #FFC133;
  --color-orange-400: #FFAE00;
  --color-orange-500: #F99B04;   /* ← Brand primary (from SVG vector source) */
  --color-orange-600: #CC8C00;
  --color-orange-700: #A37000;
  --color-orange-800: #7A5400;
  --color-orange-900: #523800;

  /* Neutral / Black scale */
  --color-black:      #0A0A0A;
  --color-gray-900:   #1A1A1A;
  --color-gray-800:   #2C2C2C;
  --color-gray-700:   #3F3F3F;
  --color-gray-600:   #555555;
  --color-gray-500:   #6E6E6E;
  --color-gray-400:   #8E8E8E;
  --color-gray-300:   #B0B0B0;
  --color-gray-200:   #D4D4D4;
  --color-gray-100:   #EBEBEB;
  --color-gray-50:    #F7F7F7;
  --color-white:      #FFFFFF;
}

/* ── Semantic Color Tokens ────────────────────────────────── */
:root {
  /* Brand */
  --brand-primary:        var(--color-orange-500);
  --brand-primary-hover:  var(--color-orange-600);
  --brand-primary-active: var(--color-orange-700);
  --brand-primary-subtle: var(--color-orange-50);

  /* Foreground */
  --fg-primary:    var(--color-black);
  --fg-secondary:  var(--color-gray-600);
  --fg-tertiary:   var(--color-gray-400);
  --fg-on-brand:   var(--color-white);
  --fg-on-dark:    var(--color-white);

  /* Background */
  --bg-page:       var(--color-white);
  --bg-subtle:     var(--color-gray-50);
  --bg-muted:      var(--color-gray-100);
  --bg-dark:       var(--color-gray-900);
  --bg-black:      var(--color-black);
  --bg-brand:      var(--color-orange-500);

  /* Border */
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-400);
  --border-brand:   var(--color-orange-500);

  /* Status */
  --color-success: #2D9E5F;
  --color-warning: var(--color-orange-500);
  --color-error:   #D93025;
  --color-info:    #1A73E8;
}

/* ── Typography Scale ─────────────────────────────────────── */
:root {
  --font-family:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-family-italic: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Size scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   2rem;      /* 32px */
  --text-3xl:   2.5rem;    /* 40px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   4rem;      /* 64px */

  /* Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* Leading */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;
}

/* ── Semantic Type Roles ──────────────────────────────────── */
:root {
  /* Display — very large hero text */
  --display-font:    var(--font-family);
  --display-size:    var(--text-5xl);
  --display-weight:  var(--weight-black);
  --display-leading: var(--leading-tight);
  --display-tracking:var(--tracking-wide);
  --display-transform: uppercase;

  /* H1 — page title */
  --h1-font:    var(--font-family);
  --h1-size:    var(--text-4xl);
  --h1-weight:  var(--weight-black);
  --h1-leading: var(--leading-tight);
  --h1-tracking:var(--tracking-wide);
  --h1-transform: uppercase;

  /* H2 — section title */
  --h2-font:    var(--font-family);
  --h2-size:    var(--text-3xl);
  --h2-weight:  var(--weight-bold);
  --h2-leading: var(--leading-snug);
  --h2-tracking:var(--tracking-wide);
  --h2-transform: uppercase;

  /* H3 — subsection */
  --h3-font:    var(--font-family);
  --h3-size:    var(--text-2xl);
  --h3-weight:  var(--weight-bold);
  --h3-leading: var(--leading-snug);
  --h3-tracking:var(--tracking-normal);

  /* H4 */
  --h4-font:    var(--font-family);
  --h4-size:    var(--text-xl);
  --h4-weight:  var(--weight-semibold);
  --h4-leading: var(--leading-snug);
  --h4-tracking:var(--tracking-normal);

  /* Body / paragraph */
  --body-font:    var(--font-family);
  --body-size:    var(--text-base);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);
  --body-tracking:var(--tracking-normal);

  /* Body small */
  --body-sm-size:   var(--text-sm);
  --body-sm-weight: var(--weight-regular);

  /* Label / caption */
  --label-font:    var(--font-family);
  --label-size:    var(--text-xs);
  --label-weight:  var(--weight-semibold);
  --label-tracking:var(--tracking-wider);
  --label-transform: uppercase;

  /* Overline */
  --overline-size:    var(--text-xs);
  --overline-weight:  var(--weight-bold);
  --overline-tracking:var(--tracking-widest);
  --overline-transform: uppercase;
  --overline-color:   var(--brand-primary);
}

/* ── Spacing Scale ────────────────────────────────────────── */
:root {
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
}

/* ── Border Radius ────────────────────────────────────────── */
:root {
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-pill:   9999px;
}

/* ── Elevation / Shadow ───────────────────────────────────── */
:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.18);
  --shadow-brand: 0 4px 20px rgba(249,155,4,0.30);
}

/* ── Transitions ──────────────────────────────────────────── */
:root {
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Utility Classes ──────────────────────────────────────── */
.text-display {
  font-family: var(--display-font);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.text-h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  text-transform: uppercase;
}
.text-h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  text-transform: uppercase;
}
.text-h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
}
.text-h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
}
.text-body  { font-size: var(--body-size);    font-weight: var(--body-weight);    line-height: var(--body-leading); }
.text-sm    { font-size: var(--text-sm);      font-weight: var(--weight-regular);  line-height: var(--leading-normal); }
.text-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.text-overline {
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-primary);
}

/* Base reset helpers */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-family);
  font-size: var(--body-size);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}