/**
 * Aranyika CSS Framework v1.0.0
 * The Sunlit Grove design foundation for Oxygen 6.
 *
 * Naming:
 * --aw-*          design tokens
 * .aw-*           semantic components and layout utilities
 * .aw-u-*         single-purpose utilities
 */

@layer aw-tokens, aw-base, aw-layout, aw-components, aw-utilities;

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

@layer aw-tokens {
  :root {
    /* Brand palette — source colors */
    --aw-alabaster: #f7f5f0;
    --aw-warm-paper: #f4ebe3;
    --aw-root-orange: #ca734e;
    --aw-terracotta: #c06e52;
    --aw-deep-pine: #1e3328;
    --aw-obsidian: #332d29;
    --aw-dusty-sage: #a9b8a4;
    --aw-mist-sage: #d7ded2;
    --aw-clay-shadow: #8e4f38;
    --aw-grove-gold: #c99a4b;

    /* Accessible semantic roles */
    --aw-color-canvas: var(--aw-alabaster);
    --aw-color-surface: var(--aw-warm-paper);
    --aw-color-surface-soft: var(--aw-mist-sage);
    --aw-color-text: var(--aw-obsidian);
    --aw-color-heading: var(--aw-deep-pine);
    --aw-color-link: var(--aw-clay-shadow);
    --aw-color-link-hover: var(--aw-deep-pine);
    --aw-color-action: var(--aw-clay-shadow);
    --aw-color-action-hover: var(--aw-deep-pine);
    --aw-color-action-text: var(--aw-alabaster);
    --aw-color-border: var(--aw-clay-shadow);
    --aw-color-border-soft: var(--aw-dusty-sage);
    --aw-color-focus: var(--aw-deep-pine);
    --aw-color-dark-surface: var(--aw-deep-pine);
    --aw-color-dark-text: var(--aw-alabaster);
    --aw-color-dark-muted: var(--aw-dusty-sage);

    /* Fonts are loaded through Oxygen 6; these names provide the stack. */
    --aw-font-display: "The Seasons", "Cormorant Garamond", Georgia, serif;
    --aw-font-body: "Satoshi", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Fluid type */
    --aw-text-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --aw-text-sm: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
    --aw-text-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
    --aw-text-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
    --aw-text-h3: clamp(1.625rem, 1.45rem + 0.7vw, 1.875rem);
    --aw-text-h2: clamp(1.875rem, 1.48rem + 1.55vw, 2.5rem);
    --aw-text-h1: clamp(2.375rem, 1.7rem + 2.65vw, 3.5rem);
    --aw-text-hero: clamp(2.75rem, 1.55rem + 4.8vw, 5.5rem);

    /* Fluid spacing */
    --aw-space-2xs: clamp(0.375rem, 0.33rem + 0.18vw, 0.5rem);
    --aw-space-xs: clamp(0.625rem, 0.55rem + 0.28vw, 0.8125rem);
    --aw-space-sm: clamp(0.875rem, 0.76rem + 0.45vw, 1.125rem);
    --aw-space-md: clamp(1.25rem, 1.04rem + 0.82vw, 1.75rem);
    --aw-space-lg: clamp(1.875rem, 1.48rem + 1.55vw, 2.75rem);
    --aw-space-xl: clamp(2.75rem, 2.05rem + 2.75vw, 4.5rem);
    --aw-space-2xl: clamp(4rem, 2.95rem + 4.2vw, 6.75rem);
    --aw-space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* Layout */
    --aw-content-narrow: 42rem;
    --aw-content-reading: 48rem;
    --aw-content-wide: 78rem;
    --aw-gutter: clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem);
    --aw-grid-min: min(100%, 17rem);

    /* Shape and movement */
    --aw-radius-sm: 0.125rem;
    --aw-radius-md: 0.375rem;
    --aw-radius-pill: 999rem;
    --aw-shadow-soft: 0 0.75rem 2.5rem rgb(51 45 41 / 0.08);
    --aw-transition: 180ms ease;
  }
}

/* --------------------------------------------------------------------------
   2. LOW-SPECIFICITY BASE
   -------------------------------------------------------------------------- */

@layer aw-base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: light;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    color: var(--aw-color-text);
    background: var(--aw-color-canvas);
    font-family: var(--aw-font-body);
    font-size: var(--aw-text-body);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 0.55em;
    color: var(--aw-color-heading);
    font-family: var(--aw-font-display);
    font-weight: 400;
    line-height: 1.05;
    text-wrap: balance;
  }

  :where(h1) { font-size: var(--aw-text-h1); }
  :where(h2) { font-size: var(--aw-text-h2); }
  :where(h3) { font-size: var(--aw-text-h3); }

  :where(p, ul, ol, blockquote) {
    margin-block: 0 1em;
  }

  :where(a) {
    color: var(--aw-color-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  :where(a:hover) {
    color: var(--aw-color-link-hover);
  }

  :where(img, picture, svg, video) {
    display: block;
    max-width: 100%;
  }

  :where(img, video) {
    height: auto;
  }

  :where(button, input, select, textarea) {
    font: inherit;
  }

  :where(:focus-visible) {
    outline: 0.1875rem solid var(--aw-color-focus);
    outline-offset: 0.1875rem;
  }

  ::selection {
    color: var(--aw-deep-pine);
    background: var(--aw-dusty-sage);
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

@layer aw-layout {
  .aw-container {
    width: min(100% - (2 * var(--aw-gutter)), var(--aw-content-wide));
    margin-inline: auto;
  }

  .aw-container--reading {
    width: min(100% - (2 * var(--aw-gutter)), var(--aw-content-reading));
    margin-inline: auto;
  }

  .aw-container--narrow {
    width: min(100% - (2 * var(--aw-gutter)), var(--aw-content-narrow));
    margin-inline: auto;
  }

  .aw-section {
    padding-block: var(--aw-space-section);
  }

  .aw-section--compact {
    padding-block: var(--aw-space-2xl);
  }

  .aw-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--aw-stack-space, var(--aw-space-md));
  }

  .aw-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aw-cluster-space, var(--aw-space-sm));
  }

  .aw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--aw-grid-min), 1fr));
    gap: var(--aw-grid-gap, var(--aw-space-lg));
  }

  .aw-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--aw-grid-gap, var(--aw-space-lg));
  }

  .aw-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--aw-grid-gap, var(--aw-space-lg));
  }

  .aw-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--aw-space-xl);
  }

  .aw-cover {
    display: flex;
    min-height: min(46rem, 85svh);
    flex-direction: column;
    justify-content: center;
    padding-block: var(--aw-space-2xl);
  }

  @media (max-width: 48rem) {
    .aw-grid--2,
    .aw-grid--3,
    .aw-split {
      grid-template-columns: 1fr;
    }
  }
}

/* --------------------------------------------------------------------------
   4. ARANYIKA COMPONENT FOUNDATIONS
   -------------------------------------------------------------------------- */

@layer aw-components {
  .aw-hero-title {
    max-width: 12ch;
    font-size: var(--aw-text-hero);
    line-height: 0.98;
    letter-spacing: -0.025em;
  }

  .aw-lead {
    max-width: 48ch;
    font-size: var(--aw-text-lead);
    line-height: 1.55;
  }

  .aw-eyebrow {
    margin: 0;
    color: var(--aw-clay-shadow);
    font-family: var(--aw-font-body);
    font-size: var(--aw-text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .aw-button {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: var(--aw-space-xs);
    padding: 0.75rem 1.35rem;
    border: 0.125rem solid transparent;
    border-radius: var(--aw-radius-sm);
    font-size: var(--aw-text-sm);
    font-weight: 500;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--aw-transition), background-color var(--aw-transition), border-color var(--aw-transition), transform var(--aw-transition);
  }

  .aw-button:hover {
    transform: translateY(-0.0625rem);
  }

  .aw-button--primary {
    color: var(--aw-color-action-text);
    background: var(--aw-color-action);
    border-color: var(--aw-color-action);
  }

  .aw-button--primary:hover {
    color: var(--aw-color-action-text);
    background: var(--aw-color-action-hover);
    border-color: var(--aw-color-action-hover);
  }

  .aw-button--secondary {
    color: var(--aw-deep-pine);
    background: transparent;
    border-color: var(--aw-deep-pine);
  }

  .aw-button--secondary:hover {
    color: var(--aw-alabaster);
    background: var(--aw-deep-pine);
  }

  .aw-button--text {
    min-height: auto;
    padding-inline: 0;
    color: var(--aw-clay-shadow);
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .aw-card {
    padding: var(--aw-space-lg);
    color: var(--aw-color-text);
    background: var(--aw-color-surface);
    border: 0.0625rem solid var(--aw-dusty-sage);
    border-radius: var(--aw-radius-md);
  }

  .aw-card--quiet {
    background: var(--aw-alabaster);
    box-shadow: var(--aw-shadow-soft);
  }

  .aw-card--ritual {
    position: relative;
    overflow: hidden;
    border-top: 0.25rem solid var(--aw-root-orange);
  }

  .aw-card__meta {
    color: var(--aw-clay-shadow);
    font-size: var(--aw-text-sm);
    font-weight: 500;
  }

  .aw-surface--paper {
    color: var(--aw-obsidian);
    background: var(--aw-warm-paper);
  }

  .aw-surface--sage {
    color: var(--aw-obsidian);
    background: var(--aw-mist-sage);
  }

  .aw-surface--dark {
    color: var(--aw-color-dark-text);
    background: var(--aw-color-dark-surface);
  }

  .aw-surface--dark :where(h1, h2, h3, h4, h5, h6) {
    color: var(--aw-color-dark-text);
  }

  .aw-surface--dark :where(.aw-eyebrow, .aw-card__meta) {
    color: var(--aw-color-dark-muted);
  }

  .aw-divider {
    width: 100%;
    height: 0.0625rem;
    border: 0;
    background: var(--aw-dusty-sage);
  }

  .aw-prose {
    max-width: 68ch;
  }

  .aw-prose :where(h2, h3) {
    margin-block-start: 1.6em;
  }

  .aw-prose :where(blockquote) {
    margin-inline: 0;
    padding-inline-start: var(--aw-space-md);
    color: var(--aw-deep-pine);
    border-inline-start: 0.1875rem solid var(--aw-root-orange);
    font-family: var(--aw-font-display);
    font-size: var(--aw-text-lead);
    font-style: italic;
  }

  .aw-form-field {
    display: grid;
    gap: var(--aw-space-2xs);
  }

  .aw-form-label {
    color: var(--aw-deep-pine);
    font-size: var(--aw-text-sm);
    font-weight: 500;
  }

  .aw-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    color: var(--aw-obsidian);
    background: var(--aw-alabaster);
    border: 0.125rem solid var(--aw-clay-shadow);
    border-radius: var(--aw-radius-sm);
  }

  textarea.aw-input {
    min-height: 9rem;
    resize: vertical;
  }

  .aw-input::placeholder {
    color: #6c615a;
    opacity: 1;
  }

  .aw-skip-link {
    position: fixed;
    z-index: 9999;
    inset-block-start: var(--aw-space-sm);
    inset-inline-start: var(--aw-space-sm);
    padding: 0.75rem 1rem;
    color: var(--aw-alabaster);
    background: var(--aw-deep-pine);
    transform: translateY(-200%);
  }

  .aw-skip-link:focus {
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   5. UTILITIES
   -------------------------------------------------------------------------- */

@layer aw-utilities {
  .aw-u-text-center { text-align: center; }
  .aw-u-text-left { text-align: left; }
  .aw-u-text-pine { color: var(--aw-deep-pine); }
  .aw-u-text-clay { color: var(--aw-clay-shadow); }
  .aw-u-text-light { color: var(--aw-alabaster); }
  .aw-u-font-display { font-family: var(--aw-font-display); }
  .aw-u-font-body { font-family: var(--aw-font-body); }
  .aw-u-width-full { width: 100%; }
  .aw-u-margin-inline-auto { margin-inline: auto; }
  .aw-u-flow > * + * { margin-block-start: var(--aw-flow-space, 1em); }
  .aw-u-no-margin { margin: 0; }
  .aw-u-radius-pill { border-radius: var(--aw-radius-pill); }

  .aw-u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  @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;
    }
  }
}