@import "tailwindcss";

/*
 * Brand tokens are set as CSS custom properties on :root by
 * app/views/layouts/application.html.erb from the current resort's Theme
 * record (white-labeling, see plan Section 4.2). The @theme block below
 * points Tailwind's own color utilities (bg-brand-primary, etc.) at those
 * custom properties, with fallbacks so the app never renders unstyled if a
 * resort has no Theme yet. Fallbacks match Granlibakken's design system
 * (see db/seeds.rb).
 *
 * The palette is the "alpine daylight" system from the Sept 2026 homepage
 * mockup: cool paper backgrounds, deep navy ink, and three action colors
 * (green / blue / gold) that map onto the three revenue centers. Anything
 * that used to reach for warm cream/ember tones now resolves to the cool
 * equivalents through these same token names, so every page moves together.
 */
@theme inline {
  /* Core brand palette */
  --color-brand-primary:    var(--brand-primary,    #075E3E);
  --color-brand-secondary:  var(--brand-secondary,  #075BBF);
  --color-brand-accent:     var(--brand-accent,     #D68A00);
  --color-brand-background: var(--brand-background, #EEF3F8);
  --color-brand-text:       var(--brand-text,       #102038);

  /* Extended palette */
  --color-brand-cedar-deep: var(--brand-cedar-deep, #05412B);
  --color-brand-sage:       var(--brand-sage,       #3F8A68);
  --color-brand-sage-tint:  var(--brand-sage-tint,  #E7F1EB);
  --color-brand-ember-deep: var(--brand-ember-deep, #A96A00);
  --color-brand-ember-tint: var(--brand-ember-tint, #F6EBD9);
  --color-brand-sky:        var(--brand-sky,        #075BBF);
  --color-brand-sky-tint:   var(--brand-sky-tint,   #E4F1FD);
  --color-brand-cream:      var(--brand-cream,      #F5F8FB);
  --color-brand-snow:       var(--brand-snow,       #FFFFFF);
  --color-brand-line:       var(--brand-line,       #E6EAF0);
  --color-brand-ink-soft:   var(--brand-ink-soft,   #5A6573);
  /* Text links. Granlibakken's Brand Book gives links their own colour (Lake). */
  --color-brand-link:       var(--brand-link,       #075BBF);

  /* Typography */
  --font-brand-heading: var(--brand-heading-font, 'Newsreader', Georgia, 'Times New Roman', serif);
  --font-brand-body:    var(--brand-body-font,    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif);

  /* Elevation — the mockup's cards float on a single soft, wide shadow
     rather than Tailwind's default tight grey ones. */
  --shadow-brand-card:  0 18px 50px rgba(10, 25, 45, 0.18);
  --shadow-brand-pill:  0 10px 34px rgba(10, 25, 45, 0.16);
  --shadow-brand-soft:  0 6px 20px rgba(10, 25, 45, 0.08);
}

@layer base {
  /*
   * Display type in this system is the serif at tight leading and a slight
   * negative track — set once here so headings match the mockup without
   * every view repeating the same three utilities.
   */
  h1, h2, h3 {
    letter-spacing: -0.02em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-brand-heading);
  }

  /* Links written without classes (rich text, pasted copy) still take the
     link colour. */
  a:not([class]) {
    color: var(--color-brand-link);
    text-decoration: underline;
  }
}

@utility text-balance-heading {
  text-wrap: balance;
}

/* A soft dark pool in the top-left of the homepage photo, behind the white
   logo and above the image, so the logo reads on bright snow or sky. */
@layer components {
  .hero-logo-scrim {
    position: absolute;
    inset: 0 auto auto 0;
    width: 520px;
    height: 300px;
    pointer-events: none;
    background: radial-gradient(ellipse at 15% 10%, rgba(8, 16, 34, 0.6), rgba(8, 16, 34, 0) 65%);
  }

  @media (max-width: 767px) {
    .hero-logo-scrim {
      width: 60vw;
      height: 200px;
    }
  }
}