/* GENERATED from tokens.json (TheUniDeals v1.0.0) — do not edit by hand.
 * Themes: light is the default; dark applies via prefers-color-scheme
 * and explicitly via [data-theme="dark"]. [data-theme="light"] forces light.
 * Fonts must be bundled locally (@font-face in the app); never loaded from a CDN. */

:root {
  --tud-color-ramp-accent-50: #FFF3EC;
  --tud-color-ramp-accent-100: #FFE3D4;
  --tud-color-ramp-accent-200: #FFC4A8;
  --tud-color-ramp-accent-300: #FF9E73;
  --tud-color-ramp-accent-400: #FF7A47;
  --tud-color-ramp-accent-500: #FF5C26;
  --tud-color-ramp-accent-550: #FF581E;
  --tud-color-ramp-accent-600: #EB501D;
  --tud-color-ramp-accent-700: #C93F12;
  --tud-color-ramp-accent-800: #A23108;
  --tud-color-ramp-accent-900: #8A2500;
  --tud-color-ramp-neutral-0: #FFFFFF;
  --tud-color-ramp-neutral-50: #FAF7F2;
  --tud-color-ramp-neutral-100: #EEE5DC;
  --tud-color-ramp-neutral-200: #E7DCD1;
  --tud-color-ramp-neutral-300: #CFC7BD;
  --tud-color-ramp-neutral-400: #93887E;
  --tud-color-ramp-neutral-450: #8D857B;
  --tud-color-ramp-neutral-500: #6B6660;
  --tud-color-ramp-neutral-600: #55504A;
  --tud-color-ramp-neutral-700: #3D3934;
  --tud-color-ramp-neutral-800: #24221F;
  --tud-color-ramp-neutral-850: #1C1A17;
  --tud-color-ramp-neutral-900: #161512;
  --tud-color-ramp-neutral-950: #141412;
  --tud-color-accent-base: #FF5C26;
  --tud-color-accent-text-on-light: #C93F12;
  --tud-color-accent-text-on-dark: #FF5C26;
  --tud-color-accent-deep: #8A2500;
  --tud-color-scanner-valid-bg: #1E7D46;
  --tud-color-scanner-valid-fg: #FFFFFF;
  --tud-color-scanner-invalid-bg: #C0362C;
  --tud-color-scanner-invalid-fg: #FFFFFF;
  --tud-color-scanner-expired-bg: #55504A;
  --tud-color-scanner-expired-fg: #FFFFFF;
  --tud-space-0: 0px;
  --tud-space-1: 4px;
  --tud-space-2: 8px;
  --tud-space-3: 12px;
  --tud-space-4: 16px;
  --tud-space-5: 20px;
  --tud-space-6: 24px;
  --tud-space-8: 32px;
  --tud-space-10: 40px;
  --tud-space-12: 48px;
  --tud-space-16: 64px;
  --tud-radius-xs: 4px;
  --tud-radius-sm: 8px;
  --tud-radius-md: 12px;
  --tud-radius-lg: 16px;
  --tud-radius-xl: 22px;
  --tud-radius-pill: 999px;
  --tud-border-hairline: 1px;
  --tud-border-default: 1.5px;
  --tud-border-strong: 2px;
  --tud-focus-ring: 0 0 0 3px rgba(255,92,38,0.35);
  --tud-elevation-e0: none;
  --tud-elevation-e1: 0 1px 2px rgba(20,20,18,0.06);
  --tud-elevation-e2: 0 4px 12px rgba(20,20,18,0.08);
  --tud-elevation-e3: 0 12px 32px rgba(20,20,18,0.14);
  --tud-elevation-accent-glow: 0 24px 48px rgba(235,80,29,0.28);
  --tud-duration-instant: 80ms;
  --tud-duration-fast: 140ms;
  --tud-duration-base: 220ms;
  --tud-duration-slow: 320ms;
  --tud-duration-deliberate: 480ms;
  --tud-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tud-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --tud-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --tud-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tud-icon-xs: 16px;
  --tud-icon-sm: 20px;
  --tud-icon-md: 24px;
  --tud-icon-lg: 28px;
  --tud-icon-xl: 32px;
  --tud-icon-stroke: 1.75px;
  --tud-font-primary: 'Outfit', sans-serif;
  --tud-font-secondary: 'Space Grotesk', sans-serif;
  --tud-font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
}

:root, [data-theme="light"] {
  --tud-color-bg-canvas: #FAF7F2;
  --tud-color-bg-surface: #FFFFFF;
  --tud-color-bg-raised: #FFFFFF;
  --tud-color-bg-sunken: #FFF3EC;
  --tud-color-bg-inverse: #141412;
  --tud-color-text-primary: #141412;
  --tud-color-text-secondary: #55504A;
  --tud-color-text-muted: #6B6660;
  --tud-color-text-placeholder: #93887E;
  --tud-color-text-inverse: #FAF7F2;
  --tud-color-text-on-accent: #141412;
  --tud-color-accent-pressed: #EB501D;
  --tud-color-accent-tint: #FFF3EC;
  --tud-color-accent-tint-border: #FFC4A8;
  --tud-color-border-default: #EEE5DC;
  --tud-color-border-strong: #E7DCD1;
  --tud-color-border-focus: #FF5C26;
  --tud-color-status-success-text: #1E7D46;
  --tud-color-status-success-bg: #E8F5EC;
  --tud-color-status-warning-text: #8F5A00;
  --tud-color-status-warning-bg: #FFF2DB;
  --tud-color-status-error-text: #C0362C;
  --tud-color-status-error-bg: #FCEAE8;
  --tud-color-status-info-text: #2456A8;
  --tud-color-status-info-bg: #E9F0FB;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tud-color-bg-canvas: #141412;
    --tud-color-bg-surface: #1C1A17;
    --tud-color-bg-raised: #24221F;
    --tud-color-bg-sunken: #161512;
    --tud-color-bg-inverse: #FAF7F2;
    --tud-color-text-primary: #FAF7F2;
    --tud-color-text-secondary: #CFC7BD;
    --tud-color-text-muted: #B5ADA2;
    --tud-color-text-placeholder: #8D857B;
    --tud-color-text-inverse: #141412;
    --tud-color-text-on-accent: #141412;
    --tud-color-accent-pressed: #FF7A47;
    --tud-color-accent-tint: #2A1A12;
    --tud-color-accent-tint-border: #4A2A1A;
    --tud-color-border-default: #33302B;
    --tud-color-border-strong: #3D3934;
    --tud-color-border-focus: #FF5C26;
    --tud-color-status-success-text: #4CC97E;
    --tud-color-status-success-bg: #12281A;
    --tud-color-status-warning-text: #FFB84D;
    --tud-color-status-warning-bg: #2A2010;
    --tud-color-status-error-text: #FF8075;
    --tud-color-status-error-bg: #2E1512;
    --tud-color-status-info-text: #8FB6F2;
    --tud-color-status-info-bg: #131F31;
  }
}

[data-theme="dark"] {
  --tud-color-bg-canvas: #141412;
  --tud-color-bg-surface: #1C1A17;
  --tud-color-bg-raised: #24221F;
  --tud-color-bg-sunken: #161512;
  --tud-color-bg-inverse: #FAF7F2;
  --tud-color-text-primary: #FAF7F2;
  --tud-color-text-secondary: #CFC7BD;
  --tud-color-text-muted: #B5ADA2;
  --tud-color-text-placeholder: #8D857B;
  --tud-color-text-inverse: #141412;
  --tud-color-text-on-accent: #141412;
  --tud-color-accent-pressed: #FF7A47;
  --tud-color-accent-tint: #2A1A12;
  --tud-color-accent-tint-border: #4A2A1A;
  --tud-color-border-default: #33302B;
  --tud-color-border-strong: #3D3934;
  --tud-color-border-focus: #FF5C26;
  --tud-color-status-success-text: #4CC97E;
  --tud-color-status-success-bg: #12281A;
  --tud-color-status-warning-text: #FFB84D;
  --tud-color-status-warning-bg: #2A2010;
  --tud-color-status-error-text: #FF8075;
  --tud-color-status-error-bg: #2E1512;
  --tud-color-status-info-text: #8FB6F2;
  --tud-color-status-info-bg: #131F31;
}

/* Type scale */
.tud-type-display-1 {
  font-family: var(--tud-font-primary);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tud-type-display-2 {
  font-family: var(--tud-font-primary);
  font-size: 32px;
  line-height: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.tud-type-heading-1 {
  font-family: var(--tud-font-primary);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tud-type-heading-2 {
  font-family: var(--tud-font-primary);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tud-type-heading-3 {
  font-family: var(--tud-font-primary);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
}
.tud-type-body-lg {
  font-family: var(--tud-font-primary);
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.tud-type-body {
  font-family: var(--tud-font-primary);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.tud-type-body-strong {
  font-family: var(--tud-font-primary);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.tud-type-caption {
  font-family: var(--tud-font-primary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.tud-type-overline {
  font-family: var(--tud-font-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tud-type-numeric-display {
  font-family: var(--tud-font-secondary);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tud-type-numeric {
  font-family: var(--tud-font-secondary);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tud-type-urdu-heading {
  font-family: var(--tud-font-urdu);
  font-size: 22px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0;
  direction: rtl;
}
.tud-type-urdu-body {
  font-family: var(--tud-font-urdu);
  font-size: 16px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: 0;
  direction: rtl;
}
.tud-type-urdu-caption {
  font-family: var(--tud-font-urdu);
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
  direction: rtl;
}