/* ============================================================
   COLMENAR — Shared Design Foundation
   Font-faces + Design tokens + Reset + Utility classes
   All pages <link> to this file.
   ============================================================ */


/* ============================================================
   LAYER 1 — FONT-FACE DECLARATIONS
   ============================================================ */

/* Hurme Geometric Sans No. 3 — Display & Headline */
@font-face {
  font-family: 'Hurme Geometric Sans No. 3';
  src: url('/assets/fonts/HurmeGeometricSans3_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans No. 3';
  src: url('/assets/fonts/HurmeGeometricSans3_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hurme Geometric Sans No. 3';
  src: url('/assets/fonts/HurmeGeometricSans3_SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Texta Alt — Title, Body & Label */
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Texta Alt';
  src: url('/assets/fonts/TextaAlt-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ============================================================
   LAYER 2 — DESIGN TOKENS (from tokens.css)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR ROLES — Light scheme
  ---------------------------------------------------------- */

  /* Primary */
  --color-primary:                #D49A0C;
  --color-on-primary:             #1A1A24;
  --color-primary-container:      #F4E8B4;
  --color-on-primary-container:   #4A3400;

  /* Secondary — TBD: currently neutral slate placeholder */
  --color-secondary:              #5E5E72;
  --color-on-secondary:           #F6F4F0;
  --color-secondary-container:    #E4E4EC;
  --color-on-secondary-container: #1A1A24;

  /* Surface & Background */
  --color-surface:                #F6F4F0;
  --color-surface-variant:        #ECEAE5;
  --color-background:             #F6F4F0;

  /* On Surface — text hierarchy */
  --color-on-surface:             #1A1A24;
  --color-on-surface-variant:     #4E4E5A;
  --color-on-surface-muted:       #7E7E8A;

  /* Outline */
  --color-outline:                #D0CEC8;
  --color-outline-variant:        #E4E2DC;

  /* ----------------------------------------------------------
     COLOR ROLES — Dark / Inverse scheme
  ---------------------------------------------------------- */

  --color-inverse-surface:              #1A1A24;
  --color-on-inverse-surface:           #F6F4F0;
  --color-on-inverse-surface-variant:   #9898A4;
  --color-on-inverse-surface-muted:     #484854;
  --color-outline-dark:                 #2C2C38;

  /* ----------------------------------------------------------
     Convenience aliases (backward compat with main site)
  ---------------------------------------------------------- */

  --color-dark:             var(--color-inverse-surface);
  --color-gold:             var(--color-primary);
  --color-on-inverse:       var(--color-on-inverse-surface);
  --color-on-inverse-muted: var(--color-on-inverse-surface-variant);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */

  --font-display:  'Hurme Geometric Sans No. 3', sans-serif;
  --font-body:     'Texta Alt', sans-serif;

  /* Display */
  --type-display-large-size:     57px;
  --type-display-large-weight:   700;
  --type-display-large-tracking: -0.25px;
  --type-display-large-leading:  1.1;

  --type-display-medium-size:    45px;
  --type-display-medium-weight:  700;
  --type-display-medium-tracking: 0;
  --type-display-medium-leading: 1.15;

  --type-display-small-size:     36px;
  --type-display-small-weight:   600;
  --type-display-small-tracking: 0;
  --type-display-small-leading:  1.2;

  /* Headline */
  --type-headline-large-size:    32px;
  --type-headline-large-weight:  700;
  --type-headline-large-tracking: 0;
  --type-headline-large-leading: 1.25;

  --type-headline-medium-size:   28px;
  --type-headline-medium-weight: 700;
  --type-headline-medium-tracking: 0;
  --type-headline-medium-leading: 1.3;

  --type-headline-small-size:    24px;
  --type-headline-small-weight:  600;
  --type-headline-small-tracking: 0;
  --type-headline-small-leading: 1.35;

  /* Title */
  --type-title-large-size:       22px;
  --type-title-large-weight:     700;
  --type-title-large-tracking:   0;
  --type-title-large-leading:    1.4;

  --type-title-medium-size:      16px;
  --type-title-medium-weight:    700;
  --type-title-medium-tracking:  0.15px;
  --type-title-medium-leading:   1.5;

  --type-title-small-size:       14px;
  --type-title-small-weight:     700;
  --type-title-small-tracking:   0.1px;
  --type-title-small-leading:    1.5;

  /* Body */
  --type-body-large-size:        18px;
  --type-body-large-weight:      400;
  --type-body-large-tracking:    0.5px;
  --type-body-large-leading:     1.6;

  --type-body-medium-size:       16px;
  --type-body-medium-weight:     400;
  --type-body-medium-tracking:   0.25px;
  --type-body-medium-leading:    1.65;

  /* Label */
  --type-label-large-size:       14px;
  --type-label-large-weight:     500;
  --type-label-large-tracking:   0.1px;
  --type-label-large-leading:    1.4;

  --type-label-medium-size:      12px;
  --type-label-medium-weight:    500;
  --type-label-medium-tracking:  0.5px;
  --type-label-medium-leading:   1.4;

  --type-label-small-size:       11px;
  --type-label-small-weight:     500;
  --type-label-small-tracking:   0.5px;
  --type-label-small-leading:    1.4;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------
     SHAPE — Border radius
  ---------------------------------------------------------- */

  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 24px;

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --layout-max-width:           1100px;
  --layout-padding-mobile:      24px;
  --layout-padding-desktop:     48px;

  /* Legacy alias used by main site */
  --max-width: var(--layout-max-width);
}


/* ============================================================
   UTILITY CLASSES — Typography
   ============================================================ */

.type-display-large {
  font-family: var(--font-display);
  font-size: var(--type-display-large-size);
  font-weight: var(--type-display-large-weight);
  letter-spacing: var(--type-display-large-tracking);
  line-height: var(--type-display-large-leading);
}

.type-display-medium {
  font-family: var(--font-display);
  font-size: var(--type-display-medium-size);
  font-weight: var(--type-display-medium-weight);
  letter-spacing: var(--type-display-medium-tracking);
  line-height: var(--type-display-medium-leading);
}

.type-display-small {
  font-family: var(--font-display);
  font-size: var(--type-display-small-size);
  font-weight: var(--type-display-small-weight);
  letter-spacing: var(--type-display-small-tracking);
  line-height: var(--type-display-small-leading);
}

.type-headline-large {
  font-family: var(--font-display);
  font-size: var(--type-headline-large-size);
  font-weight: var(--type-headline-large-weight);
  letter-spacing: var(--type-headline-large-tracking);
  line-height: var(--type-headline-large-leading);
}

.type-headline-medium {
  font-family: var(--font-display);
  font-size: var(--type-headline-medium-size);
  font-weight: var(--type-headline-medium-weight);
  letter-spacing: var(--type-headline-medium-tracking);
  line-height: var(--type-headline-medium-leading);
}

.type-headline-small {
  font-family: var(--font-display);
  font-size: var(--type-headline-small-size);
  font-weight: var(--type-headline-small-weight);
  letter-spacing: var(--type-headline-small-tracking);
  line-height: var(--type-headline-small-leading);
}

.type-title-large {
  font-family: var(--font-body);
  font-size: var(--type-title-large-size);
  font-weight: var(--type-title-large-weight);
  letter-spacing: var(--type-title-large-tracking);
  line-height: var(--type-title-large-leading);
}

.type-title-medium {
  font-family: var(--font-body);
  font-size: var(--type-title-medium-size);
  font-weight: var(--type-title-medium-weight);
  letter-spacing: var(--type-title-medium-tracking);
  line-height: var(--type-title-medium-leading);
}

.type-title-small {
  font-family: var(--font-body);
  font-size: var(--type-title-small-size);
  font-weight: var(--type-title-small-weight);
  letter-spacing: var(--type-title-small-tracking);
  line-height: var(--type-title-small-leading);
}

.type-body-large {
  font-family: var(--font-body);
  font-size: var(--type-body-large-size);
  font-weight: var(--type-body-large-weight);
  letter-spacing: var(--type-body-large-tracking);
  line-height: var(--type-body-large-leading);
}

.type-body-medium {
  font-family: var(--font-body);
  font-size: var(--type-body-medium-size);
  font-weight: var(--type-body-medium-weight);
  letter-spacing: var(--type-body-medium-tracking);
  line-height: var(--type-body-medium-leading);
}

.type-label-large {
  font-family: var(--font-body);
  font-size: var(--type-label-large-size);
  font-weight: var(--type-label-large-weight);
  letter-spacing: var(--type-label-large-tracking);
  line-height: var(--type-label-large-leading);
  text-transform: uppercase;
}

.type-label-medium {
  font-family: var(--font-body);
  font-size: var(--type-label-medium-size);
  font-weight: var(--type-label-medium-weight);
  letter-spacing: var(--type-label-medium-tracking);
  line-height: var(--type-label-medium-leading);
  text-transform: uppercase;
}

.type-label-small {
  font-family: var(--font-body);
  font-size: var(--type-label-small-size);
  font-weight: var(--type-label-small-weight);
  letter-spacing: var(--type-label-small-tracking);
  line-height: var(--type-label-small-leading);
  text-transform: uppercase;
}


/* ============================================================
   UTILITY CLASSES — Layout
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-padding-desktop);
  padding-right: var(--layout-padding-desktop);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--layout-padding-mobile);
    padding-right: var(--layout-padding-mobile);
  }
}

.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.section--hero {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.section--dark {
  background-color: var(--color-inverse-surface);
  color: var(--color-on-inverse-surface);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--surface-variant {
  background-color: var(--color-surface-variant);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  .section--hero {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}


/* ============================================================
   LAYER 3 — RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--type-body-large-size);
  font-weight: var(--type-body-large-weight);
  line-height: var(--type-body-large-leading);
  letter-spacing: var(--type-body-large-tracking);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, textarea, button, select { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }