/**
 * Theme Creator Auto-Generated Tokens
 * Do not modify directly
 */

@layer reset, base, layout, components, utilities;

:root {
  /* Brand */
  --color-accent: oklch(0.457 0.104 36.445);
  --color-accent-l-1: oklch(0.556 0.104 36.445);
  --color-accent-l-2: oklch(0.654 0.104 36.445);
  --color-accent-l-3: oklch(0.753 0.104 36.445);
  --color-accent-l-4: oklch(0.851 0.104 36.445);
  --color-accent-l-5: oklch(0.950 0.104 36.445);
  --color-primary: oklch(0.263 0.047 218.159);
  --color-primary-l-1: oklch(0.401 0.047 218.159);
  --color-primary-l-2: oklch(0.538 0.047 218.159);
  --color-primary-l-3: oklch(0.675 0.047 218.159);
  --color-primary-l-4: oklch(0.813 0.047 218.159);
  --color-primary-l-5: oklch(0.950 0.047 218.159);
  --color-primary-t-1: oklch(0.263 0.047 218.159 / 0.167);
  --color-primary-t-2: oklch(0.263 0.047 218.159 / 0.333);
  --color-primary-t-3: oklch(0.263 0.047 218.159 / 0.500);
  --color-primary-t-4: oklch(0.263 0.047 218.159 / 0.667);
  --color-primary-t-5: oklch(0.263 0.047 218.159 / 0.833);
  --color-secondary: oklch(0.879 0.018 134.931);
  --color-tertiary: oklch(0.997 0.000 89.876);
  /* Background */
  --color-bg-body: oklch(0.961 0.008 61.452);
  --color-bg-surface: oklch(0.929 0.010 81.795);
  /* Text */
  --color-text-body: oklch(0.415 0.027 210.564);
  --color-text-title: oklch(0.263 0.047 218.159);
  /* Base */
  --color-border: oklch(0.891 0.001 197.137);
  --color-shadow: oklch(0.000 0.000 0.000);
  --color-shadow-t-1: oklch(0.000 0.000 0.000 / 0.167);
  --color-shadow-t-2: oklch(0.000 0.000 0.000 / 0.333);
  --color-shadow-t-3: oklch(0.000 0.000 0.000 / 0.500);
  --color-shadow-t-4: oklch(0.000 0.000 0.000 / 0.667);
  --color-shadow-t-5: oklch(0.000 0.000 0.000 / 0.833);
  --color-light: oklch(0.991 0.000 89.876);
  --color-dark: oklch(0.178 0.000 89.876);
  /* Status */
  --color-success: oklch(0.576 0.163 133.258);
  --color-info: oklch(0.485 0.121 244.482);
  --color-warning: oklch(0.611 0.154 53.533);
  --color-danger: oklch(0.535 0.219 28.346);
  /* Typography */
  --text-2xs: clamp(0.563rem, calc(0.582rem + -0.016vw), 0.579rem);
  --text-xs: clamp(0.694rem, calc(0.693rem + 0.010vw), 0.704rem);
  --text-s: clamp(0.833rem, calc(0.824rem + 0.047vw), 0.880rem);
  --text-m: clamp(1.000rem, calc(0.980rem + 0.100vw), 1.100rem);
  --text-l: clamp(1.200rem, calc(1.165rem + 0.175vw), 1.375rem);
  --text-xl: clamp(1.440rem, calc(1.384rem + 0.279vw), 1.719rem);
  --text-2xl: clamp(1.728rem, calc(1.644rem + 0.420vw), 2.148rem);
  --text-3xl: clamp(2.074rem, calc(1.951rem + 0.612vw), 2.686rem);
  --text-4xl: clamp(2.488rem, calc(2.315rem + 0.869vw), 3.357rem);
  --text-5xl: clamp(2.986rem, calc(2.744rem + 1.210vw), 4.196rem);
  /* Spacing */
  --space-2xs: clamp(0.512rem, calc(0.473rem + 0.195vw), 0.707rem);
  --space-xs: clamp(0.640rem, calc(0.568rem + 0.360vw), 1.000rem);
  --space-s: clamp(0.800rem, calc(0.677rem + 0.614vw), 1.414rem);
  --space-m: clamp(1.000rem, calc(0.800rem + 1.000vw), 2.000rem);
  --space-l: clamp(1.250rem, calc(0.934rem + 1.578vw), 2.828rem);
  --space-xl: clamp(1.562rem, calc(1.075rem + 2.436vw), 3.999rem);
  --space-2xl: clamp(1.953rem, calc(1.213rem + 3.701vw), 5.654rem);
  --space-3xs: clamp(0.410rem, calc(0.391rem + 0.091vw), 0.500rem);
  --space-4xs: clamp(0.328rem, calc(0.322rem + 0.026vw), 0.354rem);
  --space-3xl: clamp(2.441rem, calc(1.331rem + 5.554vw), 7.995rem);
  --space-4xl: clamp(3.052rem, calc(1.401rem + 8.253vw), 11.305rem);
  /* Design */
  --min-viewport:        20rem;
  --max-viewport:        120rem;
  --content-width:       120rem;
  /* Container */
  --container-xs: 20rem;
  --container-s: 30rem;
  --container-m: 48rem;
  --container-l: 64rem;
  --container-xl: 80rem;
  /* Height */
  --small-viewport: 100svh;
  --large-viewport: 100lvh;
  --dynamic-viewport: 100dvh;
  --viewport: 100vh;
  /* Grid */
  --columns-1: repeat(1, minmax(0, 1fr));
  --columns-2: repeat(2, minmax(0, 1fr));
  --columns-3: repeat(3, minmax(0, 1fr));
  --columns-4: repeat(4, minmax(0, 1fr));
  --columns-5: repeat(5, minmax(0, 1fr));
  --columns-6: repeat(6, minmax(0, 1fr));
  --columns-7: repeat(7, minmax(0, 1fr));
  --columns-8: repeat(8, minmax(0, 1fr));
  /* Border Radius */
  --radius-none: 0;
  --radius-xs: clamp(0.250rem, calc(0.225rem + 0.125vw), 0.375rem);
  --radius-s: clamp(0.375rem, calc(0.350rem + 0.125vw), 0.500rem);
  --radius-m: clamp(0.650rem, calc(0.630rem + 0.100vw), 0.750rem);
  --radius-l: clamp(1.000rem, calc(0.950rem + 0.250vw), 1.250rem);
  --radius-xl: clamp(1.650rem, calc(1.580rem + 0.350vw), 2.000rem);
  --radius-full: 999rem;
  /* Borders */
  --border-width-s: 1px;
  --border-width-m: 2px;
  --border-width-l: 4px;
  --border-style: solid;
  --border: var(--border-width-s) var(--border-style) var(--color-border);
  /* Touch Size */
  --touch-size: clamp(2.750rem, calc(2.700rem + 0.250vw), 3.000rem);
  /* Shadow */
  --shadow-xs: 0 1px 2px var(--color-shadow-t-1);
  --shadow-s: 0 1.5px 3px var(--color-shadow-t-1);
  --shadow-l: 0 2px 6px var(--color-shadow-t-1);
  --shadow-xl: 0 3px 12px var(--color-shadow-t-1);
  --shadow-2xl: 0 6px 48px var(--color-shadow-t-1);
  /* Transitions */
  --transition-fast: 0.1s;
  --transition-default: 0.3s;
  --transition-slow: 0.7s;
  --transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* Z-Index */
  --z-below: -1;
  --z-base: 0;
  --z-1: 1;
  --z-10: 10;
  --z-100: 100;
  --z-1000: 1000;
  --z-max: 99999;
}

@layer base {
  /* Elements */
  h1 {
    font-size: var(--text-5xl);
    font-weight: 350;
    line-height: 1.1;
  }

  h2 {
    font-size: var(--text-3xl);
    font-weight: 350;
    line-height: 1.2;
  }

  h3 {
    font-size: var(--text-l);
    font-weight: 350;
    line-height: 1.3;
  }

  h4 {
    font-size: var(--text-m);
    font-weight: 350;
    line-height: 1.3;
  }

  p {
    font-size: var(--text-m);
    font-weight: 300;
    line-height: 1.6;
  }
}
@layer base {
  /* Prose */
  .prose p {
    margin-block: 0 var(--space-m);
    max-inline-size: 65ch;
    text-wrap: pretty;
  }

  .prose h2, .prose h3, .prose h4 {
    margin-block: var(--space-m) var(--space-2xs);
    text-wrap: balance;
    max-inline-size: 40ch;
  }

  .prose ul, .prose ol {
    margin-block: var(--space-m);
    padding-inline-start: var(--space-l);
    max-inline-size: 65ch;
  }

  .prose li {
    margin-block: var(--space-2xs);
  }

  .prose strong {
    font-weight: 600;
  }

  .prose a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    color: var(--color-accent);
  }

  .prose code {
    font-family: monospace;
    font-size: var(--text-s);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xs);
  }

  .prose blockquote {
    margin-block: var(--space-l);
    padding-inline-start: var(--space-m);
    border-inline-start: 3px solid var(--color-border);
    font-style: italic;
    color: var(--color-text-body);
  }

  .prose figure {
    margin-block: var(--space-2xl);
  }

  .prose figcaption {
    margin-block-start: var(--space-xs);
    font-size: var(--text-s);
    text-align: center;
    color: var(--color-text-body);
  }

  .prose img, .prose picture, .prose video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    margin-block: var(--space-l);
  }

  .prose H2 {
    font-size: var(--text-2xl);
  }

  .prose a:hover {
    opacity: 0.8;
    transition: var(--transition-default) var(--transition-ease-in-out);
  }
}
@layer base {
  /* Sections */
  section {
    padding-inline-start: var(--space-xl);
    padding-inline-end:   var(--space-xl);
    padding-block-start:  var(--space-4xl);
    padding-block-end:    var(--space-4xl);
  }
}
/* Color dark mode — system preference or a [data-theme] switcher */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-accent: oklch(0.775 0.120 36.445);
    --color-accent-l-1: oklch(0.810 0.120 36.445);
    --color-accent-l-2: oklch(0.845 0.120 36.445);
    --color-accent-l-3: oklch(0.880 0.120 36.445);
    --color-accent-l-4: oklch(0.915 0.120 36.445);
    --color-accent-l-5: oklch(0.950 0.120 36.445);
    --color-primary: oklch(0.819 0.054 218.159);
    --color-primary-l-1: oklch(0.846 0.054 218.159);
    --color-primary-l-2: oklch(0.872 0.054 218.159);
    --color-primary-l-3: oklch(0.898 0.054 218.159);
    --color-primary-l-4: oklch(0.924 0.054 218.159);
    --color-primary-l-5: oklch(0.950 0.054 218.159);
    --color-primary-t-1: oklch(0.819 0.054 218.159 / 0.167);
    --color-primary-t-2: oklch(0.819 0.054 218.159 / 0.333);
    --color-primary-t-3: oklch(0.819 0.054 218.159 / 0.500);
    --color-primary-t-4: oklch(0.819 0.054 218.159 / 0.667);
    --color-primary-t-5: oklch(0.819 0.054 218.159 / 0.833);
    --color-secondary: oklch(0.678 0.021 134.931);
    --color-tertiary: oklch(0.651 0.000 89.876);
    --color-bg-body: oklch(0.216 0.008 61.452);
    --color-bg-surface: oklch(0.286 0.010 81.795);
    --color-text-body: oklch(0.585 0.027 210.564);
    --color-text-title: oklch(0.977 0.003 219.533);
    --color-border: oklch(0.675 0.001 197.137);
    --color-shadow: oklch(0.000 0.000 0.000);
    --color-shadow-t-1: oklch(0.000 0.000 0.000 / 0.283);
    --color-shadow-t-2: oklch(0.000 0.000 0.000 / 0.567);
    --color-shadow-t-3: oklch(0.000 0.000 0.000 / 0.850);
    --color-shadow-t-4: oklch(0.000 0.000 0.000 / 1.000);
    --color-shadow-t-5: oklch(0.000 0.000 0.000 / 1.000);
    --color-light: oklch(0.652 0.000 89.876);
    --color-dark: oklch(0.839 0.000 89.876);
    --color-success: oklch(0.748 0.188 133.258);
    --color-info: oklch(0.768 0.139 244.482);
    --color-warning: oklch(0.739 0.177 53.533);
    --color-danger: oklch(0.757 0.252 28.346);
  }
}

:root[data-theme="dark"] {
  --color-accent: oklch(0.775 0.120 36.445);
  --color-accent-l-1: oklch(0.810 0.120 36.445);
  --color-accent-l-2: oklch(0.845 0.120 36.445);
  --color-accent-l-3: oklch(0.880 0.120 36.445);
  --color-accent-l-4: oklch(0.915 0.120 36.445);
  --color-accent-l-5: oklch(0.950 0.120 36.445);
  --color-primary: oklch(0.819 0.054 218.159);
  --color-primary-l-1: oklch(0.846 0.054 218.159);
  --color-primary-l-2: oklch(0.872 0.054 218.159);
  --color-primary-l-3: oklch(0.898 0.054 218.159);
  --color-primary-l-4: oklch(0.924 0.054 218.159);
  --color-primary-l-5: oklch(0.950 0.054 218.159);
  --color-primary-t-1: oklch(0.819 0.054 218.159 / 0.167);
  --color-primary-t-2: oklch(0.819 0.054 218.159 / 0.333);
  --color-primary-t-3: oklch(0.819 0.054 218.159 / 0.500);
  --color-primary-t-4: oklch(0.819 0.054 218.159 / 0.667);
  --color-primary-t-5: oklch(0.819 0.054 218.159 / 0.833);
  --color-secondary: oklch(0.678 0.021 134.931);
  --color-tertiary: oklch(0.651 0.000 89.876);
  --color-bg-body: oklch(0.216 0.008 61.452);
  --color-bg-surface: oklch(0.286 0.010 81.795);
  --color-text-body: oklch(0.585 0.027 210.564);
  --color-text-title: oklch(0.977 0.003 219.533);
  --color-border: oklch(0.675 0.001 197.137);
  --color-shadow: oklch(0.000 0.000 0.000);
  --color-shadow-t-1: oklch(0.000 0.000 0.000 / 0.283);
  --color-shadow-t-2: oklch(0.000 0.000 0.000 / 0.567);
  --color-shadow-t-3: oklch(0.000 0.000 0.000 / 0.850);
  --color-shadow-t-4: oklch(0.000 0.000 0.000 / 1.000);
  --color-shadow-t-5: oklch(0.000 0.000 0.000 / 1.000);
  --color-light: oklch(0.652 0.000 89.876);
  --color-dark: oklch(0.839 0.000 89.876);
  --color-success: oklch(0.748 0.188 133.258);
  --color-info: oklch(0.768 0.139 244.482);
  --color-warning: oklch(0.739 0.177 53.533);
  --color-danger: oklch(0.757 0.252 28.346);
}

/* Accessibility Overrides */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-default: 0s;
    --transition-slow: 0s;
  }
}

@layer base {
  /* Focus States */
  :focus:not(:focus-visible) {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}