/* ==========================================================================
   Gus Skyy Co — Colors & Type
   The single source of truth for design tokens.
   Import once at the top of any HTML file:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url("fonts/fonts.css");

/* ==========================================================================
   :root — design tokens
   ========================================================================== */
:root {
  /* ----- Brand colors (foundational) ----- */
  --gsc-blue-dark:    #1B264F;   /* gradient end, deep surfaces */
  --gsc-blue-medium:  #274690;   /* gradient start, primary brand */
  --gsc-blue-light:   #576CA8;   /* tint, hover on dark, dividers */
  --gsc-grey-dark:    #302B27;   /* warm near-black; body on light */
  --gsc-red:          #eb280a;   /* CTA / action only */
  --gsc-red-hover:    #c41f06;   /* CTA hover */
  --gsc-green:        #7BC242;   /* feature checkmark (graphic only) */
  --gsc-white:        #ffffff;
  --gsc-off-white:    #f7f7f5;   /* alt page surface */

  /* ----- Brand gradient ----- */
  --gsc-gradient-hero:
    linear-gradient(180deg, var(--gsc-blue-medium) 0%, var(--gsc-blue-dark) 100%);
  --gsc-gradient-hero-radial:
    radial-gradient(ellipse at 30% 20%, var(--gsc-blue-medium) 0%, var(--gsc-blue-dark) 75%);

  /* ----- Semantic surfaces ----- */
  --bg-page:        var(--gsc-white);
  --bg-page-alt:    var(--gsc-off-white);
  --bg-emphasis:    var(--gsc-blue-dark);
  --bg-emphasis-gradient: var(--gsc-gradient-hero);
  --bg-card:        var(--gsc-white);

  /* ----- Semantic foregrounds ----- */
  --fg1:            var(--gsc-grey-dark);             /* primary text on light */
  --fg2:            rgba(48, 43, 39, 0.72);           /* secondary text on light */
  --fg3:            rgba(48, 43, 39, 0.52);           /* tertiary / captions */
  --fg-on-dark-1:   var(--gsc-white);                 /* primary on blue */
  --fg-on-dark-2:   rgba(255, 255, 255, 0.80);        /* secondary on blue */
  --fg-on-dark-3:   rgba(255, 255, 255, 0.55);        /* tertiary on blue */
  --fg-action:      var(--gsc-red);                   /* clickable accent */
  --fg-link:        var(--gsc-blue-medium);
  --fg-link-hover:  var(--gsc-red);

  /* ----- Borders ----- */
  --border-hairline-light: 1px solid rgba(48, 43, 39, 0.08);
  --border-hairline-dark:  1px solid rgba(255, 255, 255, 0.12);
  --border-input:          1.5px solid rgba(48, 43, 39, 0.18);
  --border-input-focus:    1.5px solid var(--gsc-blue-medium);

  /* ----- Radii ----- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* UI cards */
  --radius-lg:  16px;
  --radius-xl:  24px;   /* photo cards */
  --radius-pill: 999px; /* buttons */

  /* ----- Shadows ----- */
  --shadow-1: 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow-2: 0 8px 24px rgba(20, 30, 60, 0.18);
  --shadow-3: 0 12px 32px rgba(20, 30, 60, 0.25);

  /* ----- Spacing scale (4px base) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* ----- Container ----- */
  --container-max: 1280px;
  --container-pad-mobile:  24px;
  --container-pad-desktop: 64px;

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ==========================================================================
     Type — foundational
     ========================================================================== */
  --font-display: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif;
  --font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Type scale */
  --fs-display-xl: clamp(56px, 8vw, 112px);   /* hero H1 */
  --fs-display-lg: clamp(44px, 6vw, 80px);    /* section display */
  --fs-display-md: clamp(32px, 4.5vw, 56px);  /* sub-display */

  --fs-h2: clamp(22px, 2vw, 28px);
  --fs-h3: clamp(18px, 1.6vw, 22px);
  --fs-h4: 17px;

  --fs-body:  16px;
  --fs-body-lg: 18px;
  --fs-small:  14px;
  --fs-eyebrow: 13px;
  --fs-caption: 12px;

  /* Line-heights */
  --lh-display: 1.0;
  --lh-h2:      1.3;
  --lh-body:    1.55;

  /* Tracking */
  --tracking-display: 0;
  --tracking-eyebrow: 0.06em;
  --tracking-button:  0.02em;
}

/* ==========================================================================
   Semantic type — apply these to elements
   ========================================================================== */

/* Reset the basics */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headlines */
.gsc-h1, h1.gsc {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

.gsc-display-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  text-transform: uppercase;
  margin: 0;
}

.gsc-display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  text-transform: uppercase;
  margin: 0;
}

.gsc-h2, h2.gsc {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  margin: 0;
}

.gsc-h3, h3.gsc {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);
  line-height: 1.35;
  margin: 0;
}

.gsc-h4, h4.gsc {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h4);
  line-height: 1.4;
  margin: 0;
}

/* Body */
.gsc-body, p.gsc {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}

.gsc-body-lg {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.gsc-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.gsc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.gsc-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg3);
}

/* Utility colors */
.fg1 { color: var(--fg1); }
.fg2 { color: var(--fg2); }
.fg3 { color: var(--fg3); }
.fg-on-dark-1 { color: var(--fg-on-dark-1); }
.fg-on-dark-2 { color: var(--fg-on-dark-2); }
.fg-action    { color: var(--fg-action); }