/**
 * Sunrise Web Design Tokens
 * Framework-independent CSS custom properties.
 *
 * Official brand values are marked as BRAND.
 * Web-only implementation defaults are marked as IMPLEMENTATION.
 */

:root {
  /* ================================================================
     BRAND — Primary palette
     ================================================================ */
  --sr-sunrise-red: #da291c;
  --sr-sunrise-red-light: #ec948d;
  --sr-sunrise-red-soft: #f6c9c6;
  --sr-sunrise-red-air: #fae4e3;

  --sr-light-black: #1f1f1f;
  --sr-light-black-light: #989899;
  --sr-light-black-soft: #d5d5d6;
  --sr-light-black-air: #f3f3f5;

  --sr-ice-white: #ffffff;

  /* ================================================================
     BRAND — Ruby Glow
     Do not create alternate brand gradients.
     ================================================================ */
  --sr-ruby-glow-orange: #f39200;
  --sr-ruby-glow: linear-gradient(
    180deg,
    var(--sr-sunrise-red) 0%,
    var(--sr-ruby-glow-orange) 100%
  );

  /* ================================================================
     BRAND — Functional palette
     ================================================================ */
  --sr-coral-bloom: #f97f63;
  --sr-coral-bloom-light: #fcbfb1;
  --sr-coral-bloom-soft: #fedfd8;
  --sr-coral-bloom-air: #feefec;

  --sr-pink-rush: #df587c;
  --sr-pink-rush-light: #efacbe;
  --sr-pink-rush-soft: #f7d5de;
  --sr-pink-rush-air: #fbeaef;

  --sr-green-spark: #26a96c;
  --sr-green-spark-light: #93d4b6;
  --sr-green-spark-soft: #c9eada;
  --sr-green-spark-air: #e4f4ed;

  --sr-blue-lagoon: #59c6d8;
  --sr-blue-lagoon-light: #ace3ec;
  --sr-blue-lagoon-soft: #d6f1f5;
  --sr-blue-lagoon-air: #eaf8fa;

  /* ================================================================
     BRAND — Typography
     ================================================================ */
  --sr-font-family: "Figtree", Tahoma, sans-serif;
  --sr-font-regular: 400;
  --sr-font-bold: 700;

  --sr-tracking-display-xl: -0.03em;
  --sr-tracking-display-lg: -0.02em;
  --sr-tracking-display-md: -0.02em;
  --sr-tracking-display-sm: -0.01em;

  --sr-leading-display: 0.9;
  --sr-leading-display-descender: 1;
  --sr-leading-subline: 1.15;
  --sr-leading-body-brand: 1.2;

  /* ================================================================
     IMPLEMENTATION — Responsive web type scale
     ================================================================ */
  --sr-text-display-xl: clamp(3.5rem, 8vw, 7.5rem);
  --sr-text-display-lg: clamp(2.75rem, 6vw, 5.5rem);
  --sr-text-display-md: clamp(2.25rem, 4.5vw, 4rem);
  --sr-text-h1: clamp(2rem, 4vw, 3.5rem);
  --sr-text-h2: clamp(1.75rem, 3vw, 2.75rem);
  --sr-text-h3: clamp(1.35rem, 2vw, 1.75rem);
  --sr-text-body-lg: 1.125rem;
  --sr-text-body: 1rem;
  --sr-text-small: 0.875rem;
  --sr-text-caption: 0.75rem;

  /* ================================================================
     IMPLEMENTATION — Semantic UI tokens
     ================================================================ */
  --sr-color-canvas: var(--sr-light-black-air);
  --sr-color-surface: var(--sr-ice-white);
  --sr-color-surface-strong: var(--sr-light-black);

  --sr-color-text: var(--sr-light-black);
  --sr-color-text-on-brand: var(--sr-ice-white);
  --sr-color-text-disabled: var(--sr-light-black-light);

  --sr-color-border: var(--sr-light-black-soft);
  --sr-color-border-strong: var(--sr-light-black-light);

  --sr-color-brand: var(--sr-sunrise-red);
  --sr-color-brand-subtle: var(--sr-sunrise-red-air);
  --sr-color-brand-soft: var(--sr-sunrise-red-soft);

  --sr-color-success: var(--sr-green-spark);
  --sr-color-success-subtle: var(--sr-green-spark-air);
  --sr-color-info: var(--sr-blue-lagoon);
  --sr-color-info-subtle: var(--sr-blue-lagoon-air);
  --sr-color-warning: var(--sr-coral-bloom);
  --sr-color-warning-subtle: var(--sr-coral-bloom-air);
  --sr-color-attention: var(--sr-pink-rush);
  --sr-color-attention-subtle: var(--sr-pink-rush-air);

  /* ================================================================
     IMPLEMENTATION — Spacing
     4px-based system
     ================================================================ */
  --sr-space-1: 0.25rem;  /* 4px */
  --sr-space-2: 0.5rem;   /* 8px */
  --sr-space-3: 0.75rem;  /* 12px */
  --sr-space-4: 1rem;     /* 16px */
  --sr-space-5: 1.25rem;  /* 20px */
  --sr-space-6: 1.5rem;   /* 24px */
  --sr-space-8: 2rem;     /* 32px */
  --sr-space-10: 2.5rem;  /* 40px */
  --sr-space-12: 3rem;    /* 48px */
  --sr-space-16: 4rem;    /* 64px */
  --sr-space-20: 5rem;    /* 80px */
  --sr-space-24: 6rem;    /* 96px */

  /* ================================================================
     IMPLEMENTATION — Layout
     ================================================================ */
  --sr-container-max: 90rem;       /* 1440px */
  --sr-reading-max: 48rem;         /* 768px */
  --sr-page-gutter-mobile: 1.5rem;
  --sr-page-gutter-tablet: 2rem;
  --sr-page-gutter-desktop: 3rem;

  /* ================================================================
     IMPLEMENTATION — Shape/elevation
     Not official logo geometry.
     ================================================================ */
  --sr-radius-control: 0.75rem;
  --sr-radius-card: 1rem;
  --sr-radius-feature: 1.5rem;
  --sr-radius-pill: 9999px;

  --sr-shadow-surface:
    0 1px 2px rgb(31 31 31 / 0.05),
    0 8px 24px rgb(31 31 31 / 0.06);

  --sr-focus-ring: 0 0 0 3px rgb(218 41 28 / 0.24);

  /* ================================================================
     IMPLEMENTATION — Motion
     ================================================================ */
  --sr-motion-fast: 150ms;
  --sr-motion-standard: 220ms;
  --sr-motion-expressive: 450ms;
  --sr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Optional global foundations. Remove only if the framework owns them. */
html {
  font-family: var(--sr-font-family);
  color: var(--sr-color-text);
  background: var(--sr-color-canvas);
}

body {
  margin: 0;
  font-family: var(--sr-font-family);
  font-weight: var(--sr-font-regular);
  color: var(--sr-color-text);
  background: var(--sr-color-canvas);
}

:focus-visible {
  outline: 2px solid var(--sr-sunrise-red);
  outline-offset: 2px;
}

/* Reusable typographic primitives */
.sr-display-xl,
.sr-display-lg,
.sr-display-md,
.sr-heading {
  margin: 0;
  font-family: var(--sr-font-family);
  font-weight: var(--sr-font-bold);
  line-height: var(--sr-leading-display);
}

.sr-display-xl {
  font-size: var(--sr-text-display-xl);
  letter-spacing: var(--sr-tracking-display-xl);
}

.sr-display-lg {
  font-size: var(--sr-text-display-lg);
  letter-spacing: var(--sr-tracking-display-lg);
}

.sr-display-md {
  font-size: var(--sr-text-display-md);
  letter-spacing: var(--sr-tracking-display-md);
}

.sr-subline {
  line-height: var(--sr-leading-subline);
}

.sr-body {
  line-height: var(--sr-leading-body-brand);
}

.sr-ruby-glow {
  background: var(--sr-ruby-glow);
  color: var(--sr-ice-white);
}

.sr-page-container {
  width: min(100% - (2 * var(--sr-page-gutter-mobile)), var(--sr-container-max));
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .sr-page-container {
    width: min(100% - (2 * var(--sr-page-gutter-tablet)), var(--sr-container-max));
  }
}

@media (min-width: 80rem) {
  .sr-page-container {
    width: min(100% - (2 * var(--sr-page-gutter-desktop)), var(--sr-container-max));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}