/* ==========================================================================
   OWA 2027 Conference — styles

   1. Fonts         (@font-face rules)
   2. Design tokens (colours, fonts, spacing, etc. as CSS variables)
   3. Responsive spacing (tablet and mobile overrides)
   4. Base styles
   5. Placeholder page (temporary)

   Values come from design_handoff_owa_2027_conference/README.md.
   Use the variables below instead of typing colours or sizes directly,
   so a change only ever needs to be made in one place.
   ========================================================================== */


/* 1. Fonts
   --------------------------------------------------------------------------
   Libre Franklin is a "variable font": one file contains every weight from
   400 (Regular) to 800 (ExtraBold). It is split into two character sets;
   the browser only downloads the extended set if the page uses a character
   from it (e.g. "ł" or "ő"). See docs/conventions.md → Fonts. */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap; /* show text in a fallback font while this one loads */
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fonts */
  --font-body: "Libre Franklin", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Brand palette (OWA Visual Identity Guide 2024) */
  --forest-shade: #1A332B;
  --winter-oak: #291711;
  --crisp-blue: #336666;
  --autumn-orange: #996633;
  --rudbeckia: #E3A117;
  --staghorn-sumac: #903534;
  --woodland-green: #999966;

  /* Woodland theme: what each colour is used for */
  --color-bg: #FBFAF3;                 /* page background */
  --color-cream: #EFEEDD;              /* Tracks/Passes sections, cards, zoom control */
  --color-ink: #2B2B1F;                /* main text */
  --color-ink-soft: #5C5C42;           /* secondary text */
  --color-hairline: #DEDBC0;           /* borders and dividers */
  --color-heading: var(--forest-shade);

  --color-surface-dark: #4D4D33;       /* Why Sponsor and footer backgrounds */
  --color-on-dark: #FFFFFF;            /* text on dark backgrounds */
  --color-on-dark-muted: rgba(255, 255, 255, 0.9);
  --color-on-dark-faint: rgba(255, 255, 255, 0.55);
  --color-footer-hairline: rgba(255, 255, 255, 0.15);
  --color-footer-icon-bg: rgba(255, 255, 255, 0.12);

  --color-nav-accent: var(--woodland-green);   /* nav tagline */
  --color-register-bg: #4D4D33;                /* all "Register" buttons */
  --color-cta-bg: var(--woodland-green);       /* "Register Now", "Get Involved", bullet dots */
  --color-cta-text: #2B2B1F;
  --color-sponsor-eyebrow: #D9D9A8;

  /* Photo banners */
  --banner-tint-a: rgba(102, 102, 68, 0.12);   /* hero, speakers, passes */
  --banner-tint-b: rgba(77, 77, 46, 0.12);     /* tracks, sponsor, venue */
  --banner-panel-bg: rgba(26, 51, 43, 0.94);
  --banner-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Track card chips (background / dot) */
  --chip-1-bg: #EDF1DE;  --chip-1-dot: #999966;
  --chip-2-bg: #E3E6C7;  --chip-2-dot: #7A7A4D;
  --chip-3-bg: #F1F0DE;  --chip-3-dot: #999966;
  --chip-4-bg: #EAFBFC;  --chip-4-dot: #336666;

  /* Placeholder avatar colours (until real headshots arrive) */
  --avatar-keynote: #4D4D33;
  --avatar-1: #999966;
  --avatar-2: #7A7A4D;
  --avatar-3: #336666;

  /* Corner rounding */
  --radius-button: 3px;
  --radius-small: 4px;    /* track cards, logo tiles */
  --radius-card: 6px;     /* keynote cards, pass cards, zoom control, map */
  --radius-panel: 8px;    /* banner text panels */

  /* Shadows */
  --shadow-nav: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-zoom: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);

  /* Motion */
  --transition: 0.15s ease;

  /* Content widths */
  --width-wide: 1120px;     /* tracks, speakers, footer */
  --width-sponsor: 1000px;
  --width-hero: 920px;
  --width-text: 900px;      /* intro, passes */
  --width-venue: 760px;

  /* Spacing (padding and margins)
     Named by their DESKTOP size, so they match the numbers in the design
     README. On tablets they shrink to ¾ and on phones to ½ (see section 3).
     Use these for padding and margin only, never for `gap`, buttons or
     links (the design keeps those the same size on every screen). */
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  /* Values of 8px or less never shrink, so just write them directly (4px, 8px). */
}


/* 3. Responsive spacing
   --------------------------------------------------------------------------
   Tablet: 769–1024px wide → ¾ size, rounded to the nearest 4px.
   Mobile: 768px and below → ½ size, rounded to the nearest 4px, never under 8px. */

@media (max-width: 1024px) {
  :root {
    --space-12: 8px;
    --space-16: 12px;
    --space-20: 16px;
    --space-24: 20px;
    --space-28: 20px;
    --space-32: 24px;
    --space-36: 28px;
    --space-40: 32px;
    --space-44: 32px;
    --space-48: 36px;
    --space-56: 44px;
    --space-64: 48px;
    --space-72: 56px;
    --space-80: 60px;
    --space-96: 72px;
    --space-112: 84px;
  }
}

@media (max-width: 768px) {
  :root {
    --space-12: 8px;
    --space-16: 8px;
    --space-20: 12px;
    --space-24: 12px;
    --space-28: 16px;
    --space-32: 16px;
    --space-36: 20px;
    --space-40: 20px;
    --space-44: 24px;
    --space-48: 24px;
    --space-56: 28px;
    --space-64: 32px;
    --space-72: 36px;
    --space-80: 40px;
    --space-96: 48px;
    --space-112: 56px;
  }
}


/* 4. Base styles
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box; /* widths include padding and borders: easier to reason about */
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1rem; /* 16px by default; follows the visitor's browser text-size setting */
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
}

/* Anyone who has asked their device to reduce motion gets no animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* 5. Placeholder page (temporary — delete when the real home page is built)
   -------------------------------------------------------------------------- */

.placeholder {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  color: var(--color-heading);
  text-align: center;
}

.placeholder main {
  max-width: 40rem;
  padding: var(--space-40) 16px;
  font-size: 1.125rem;
}

.placeholder img {
  width: 248px;
}

.placeholder h1 {
  font-size: 2rem;
  font-weight: var(--weight-extrabold);
  line-height: 1.2;
  text-transform: uppercase;
}