/* =====================================================================
   Globalmeta Design System — base tokens
   Idea. Experience. Impact.

   Drop-in stylesheet. Import or copy variables into your project.
   --------------------------------------------------------------------- */

/* ---------- Inter — official brand TTFs ----------
   The brand-supplied Inter family ships in three optical sizes:
     · 18pt — body and small text  (mapped to family "Inter")
     · 24pt — medium display       (also mapped to "Inter Display" at sub-display sizes)
     · 28pt — large display        (mapped to family "Inter Display")
   Use --font-body for everything 24px and below, --font-display for
   anything larger. Browsers will pick the correct file by weight.
*/

/* ----- Inter (18pt) — body family ----- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; src: url('fonts/Inter_18pt-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; src: url('fonts/Inter_18pt-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; src: url('fonts/Inter_18pt-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; src: url('fonts/Inter_18pt-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; src: url('fonts/Inter_18pt-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; src: url('fonts/Inter_18pt-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; src: url('fonts/Inter_18pt-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; src: url('fonts/Inter_18pt-BlackItalic.ttf') format('truetype'); font-display: swap; }

/* ----- Inter Display (28pt) — large headlines ----- */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 100; src: url('fonts/Inter_28pt-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 100; src: url('fonts/Inter_28pt-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 200; src: url('fonts/Inter_28pt-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 200; src: url('fonts/Inter_28pt-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; src: url('fonts/Inter_28pt-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 300; src: url('fonts/Inter_28pt-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; src: url('fonts/Inter_28pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 400; src: url('fonts/Inter_28pt-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; src: url('fonts/Inter_28pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 500; src: url('fonts/Inter_28pt-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 600; src: url('fonts/Inter_28pt-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 700; src: url('fonts/Inter_28pt-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 800; src: url('fonts/Inter_28pt-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; src: url('fonts/Inter_28pt-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: italic; font-weight: 900; src: url('fonts/Inter_28pt-BlackItalic.ttf') format('truetype'); font-display: swap; }

/* ----- Inter Mid (24pt) — for type at 24–36px headings, if needed ----- */
@font-face { font-family: 'Inter Mid'; font-style: normal; font-weight: 400; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Mid'; font-style: normal; font-weight: 500; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Mid'; font-style: normal; font-weight: 600; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Mid'; font-style: normal; font-weight: 700; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); font-display: swap; }

:root {
  /* ===== Brand monochrome palette ===== */
  --obsidian:        #1A1A1A;  /* primary — logo, headlines, CTAs */
  --carbon:          #2D2D2D;  /* body on light, dark surfaces    */
  --snow:            #FAFAFA;  /* page background, default surface */
  --pure-white:      #FFFFFF;  /* cards, raised surfaces           */

  /* ===== Grayscale ===== */
  --gray-900: #333333;
  --gray-700: #555555;
  --gray-500: #888888;
  --gray-300: #BBBBBB;
  --gray-200: #DDDDDD;
  --gray-100: #EEEEEE;
  --gray-50:  #FAFAFA;

  /* ===== Semantic surfaces ===== */
  --bg:              var(--snow);
  --surface:         var(--pure-white);
  --surface-inverse: var(--obsidian);
  --border:          var(--gray-100);
  --border-strong:   var(--gray-200);
  --divider:         var(--gray-100);

  /* ===== Semantic text ===== */
  --fg:              var(--obsidian);     /* primary text */
  --fg-strong:       #000000;             /* edge cases needing full black */
  --fg-muted:        var(--gray-700);     /* secondary copy, captions */
  --fg-subtle:       var(--gray-500);     /* tertiary, metadata */
  --fg-inverse:      var(--snow);         /* on dark surfaces */
  --fg-inverse-muted:#BBBBBB;

  /* ===== Typography ===== */
  --font-display:    'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mid:        'Inter Mid', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Type scale — from brand guideline (page 7) */
  --type-display-size:    48px;
  --type-display-weight:  700;
  --type-display-tracking: -1px;
  --type-display-lh:      1.05;

  --type-h1-size:    36px;
  --type-h1-weight:  600;
  --type-h1-tracking: -0.5px;
  --type-h1-lh:      1.12;

  --type-h2-size:    24px;
  --type-h2-weight:  600;
  --type-h2-tracking: -0.2px;
  --type-h2-lh:      1.25;

  --type-h3-size:    20px;
  --type-h3-weight:  600;
  --type-h3-tracking: 0;
  --type-h3-lh:      1.3;

  --type-body-size:    16px;
  --type-body-weight:  400;
  --type-body-lh:      1.7;

  --type-body-sm-size: 14px;
  --type-body-sm-lh:   1.6;

  --type-caption-size: 13px;
  --type-caption-weight: 400;
  --type-caption-lh:   1.5;

  --type-overline-size:    11px;
  --type-overline-weight:  600;
  --type-overline-tracking: 2px;
  --type-overline-lh:      1.2;

  /* ===== Spacing — 8px grid ===== */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 120px;

  /* ===== Radii ===== */
  --radius-none: 0px;
  --radius-sm:   4px;     /* buttons, inputs, tags */
  --radius-md:   8px;     /* cards, image frames */
  --radius-lg:   12px;    /* feature panels (sparingly) */
  --radius-pill: 999px;   /* available but discouraged */

  /* ===== Shadows (used sparingly) ===== */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
  --shadow-pop:   0 4px 12px rgba(26,26,26,.08), 0 24px 48px rgba(26,26,26,.12);

  /* ===== Motion ===== */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:     160ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;

  /* ===== Layout ===== */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
  --gutter-desktop:   64px;
  --gutter-mobile:    24px;
}

/* =====================================================================
   Semantic typography classes
   Use these directly OR copy the rule body into your component.
   --------------------------------------------------------------------- */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

.gm-display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--type-display-lh);
  color: var(--fg);
}

.gm-h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
  line-height: var(--type-h1-lh);
  color: var(--fg);
}

.gm-h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
  line-height: var(--type-h2-lh);
  color: var(--fg);
}

.gm-h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-lh);
  color: var(--fg);
}

.gm-body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--fg);
}

.gm-body-sm {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  color: var(--fg-muted);
}

.gm-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--fg-muted);
}

.gm-overline {
  font-family: var(--font-body);
  font-size: var(--type-overline-size);
  font-weight: var(--type-overline-weight);
  letter-spacing: var(--type-overline-tracking);
  line-height: var(--type-overline-lh);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Helpers */
.gm-mono       { font-family: var(--font-mono); }
.gm-on-dark    { color: var(--fg-inverse); }
.gm-on-dark .gm-overline,
.gm-on-dark .gm-caption,
.gm-on-dark .gm-body-sm { color: var(--fg-inverse-muted); }
