/*
 * Adıyaman Belediyesi Design System — Figma değişkenleri (dosya q7Jf2dD8yqiI7vzyqPfxvc, sayfa "Design System").
 * Adlar Figma'daki WEB kod söz dizimiyle birebir aynıdır; get_design_context çıktısındaki var(--…) adlarıyla eşleşir.
 * Kırılımlar: Masaüstü ≥ 1280px, Tablet 768–1279px, Mobil ≤ 767px (Figma modları Desktop / Tablet / Mobile).
 */

:root {
  /* ---- Primitives ---- */
  --blue-50: #f4f7fe;
  --blue-100: #e6ecff;
  --blue-200: #cedafe;
  --blue-300: #aabefe;
  --blue-400: #7f9afe;
  --blue-500: #5f78e8;
  --blue-600: #475cc9;
  --blue-700: #3546b1;
  --blue-800: #26338a;
  --blue-900: #1a236a;
  --blue-950: #0e144a;
  --teal-50: #edfaf9;
  --teal-100: #dbf2f1;
  --teal-200: #b7e5e4;
  --teal-300: #83d1cf;
  --teal-400: #2db9b7;
  --teal-500: #099695;
  --teal-600: #097877;
  --teal-700: #075f5e;
  --teal-800: #034a49;
  --teal-900: #003635;
  --teal-950: #022222;
  --neutral-0: #ffffff;
  --neutral-50: #f7f9ff;
  --neutral-100: #eff2fb;
  --neutral-200: #e2e5ee;
  --neutral-300: #ced1da;
  --neutral-400: #a6a9b1;
  --neutral-500: #7d8088;
  --neutral-600: #61636a;
  --neutral-700: #4a4d54;
  --neutral-800: #35383e;
  --neutral-900: #1f222c;
  --neutral-950: #11131c;
  --neutral-1000: #000000;
  --green-50: #eefbf1;
  --green-100: #dcf4e1;
  --green-200: #bae8c5;
  --green-300: #89d69e;
  --green-400: #51ba75;
  --green-500: #049d50;
  --green-600: #047e40;
  --green-700: #016431;
  --green-800: #004e24;
  --green-900: #013819;
  --green-950: #01240e;
  --amber-50: #fff5e9;
  --amber-100: #fbead3;
  --amber-200: #f6d5aa;
  --amber-300: #ebb66d;
  --amber-400: #d59221;
  --amber-500: #b07602;
  --amber-600: #8d5e04;
  --amber-700: #704a01;
  --amber-800: #573903;
  --amber-900: #402800;
  --amber-950: #2a1901;
  --red-50: #fef4f2;
  --red-100: #fee7e3;
  --red-200: #ffcdc5;
  --red-300: #ffa698;
  --red-400: #fe6d5a;
  --red-500: #e53b2c;
  --red-600: #c50c04;
  --red-700: #9e0401;
  --red-800: #7c0301;
  --red-900: #5d0100;
  --red-950: #3e0100;
  --alpha-black-8: #11131c14;
  --alpha-black-16: #11131c29;
  --alpha-black-48: #11131c7a;
  --brand-logo-navy: #00255a;
  --brand-logo-teal: #1a9ba4;
  --brand-logo-black: #231f20;
  --brand-logo-white: #ffffff;

  /* ---- Color (Light) ---- */
  --color-bg-canvas: var(--neutral-0);
  --color-bg-surface: var(--neutral-0);
  --color-bg-subtle: var(--neutral-50);
  --color-bg-muted: var(--neutral-100);
  --color-bg-inverse: var(--blue-950);
  --color-bg-brand: var(--blue-700);
  --color-bg-brand-subtle: var(--blue-50);
  --color-bg-accent: var(--teal-400);
  --color-bg-accent-subtle: var(--teal-50);
  --color-bg-success-subtle: var(--green-50);
  --color-bg-warning-subtle: var(--amber-50);
  --color-bg-danger-subtle: var(--red-50);
  --color-bg-info-subtle: var(--blue-50);
  --color-text-primary: var(--blue-950);
  --color-text-secondary: var(--neutral-700);
  --color-text-tertiary: var(--neutral-600);
  --color-text-disabled: var(--neutral-400);
  --color-text-inverse: var(--neutral-0);
  --color-text-brand: var(--blue-700);
  --color-text-accent: var(--teal-700);
  --color-text-on-brand: var(--neutral-0);
  --color-text-on-action: var(--neutral-0);
  --color-text-on-accent: var(--blue-950);
  --color-text-success: var(--green-700);
  --color-text-warning: var(--amber-700);
  --color-text-danger: var(--red-700);
  --color-text-info: var(--blue-700);
  --color-border-subtle: var(--neutral-100);
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--blue-950);
  --color-border-brand: var(--blue-700);
  --color-border-focus: var(--blue-600);
  --color-border-danger: var(--red-600);
  --color-border-success: var(--green-600);
  --color-border-input: var(--neutral-500);
  --color-icon-primary: var(--blue-950);
  --color-icon-secondary: var(--neutral-600);
  --color-icon-brand: var(--blue-700);
  --color-icon-accent: var(--teal-600);
  --color-icon-inverse: var(--neutral-0);
  --color-action-primary-default: var(--blue-700);
  --color-action-primary-hover: var(--blue-800);
  --color-action-primary-pressed: var(--blue-900);
  --color-action-secondary-default: var(--teal-700);
  --color-action-secondary-hover: var(--teal-800);
  --color-action-secondary-pressed: var(--teal-900);
  --color-action-neutral-default: var(--neutral-0);
  --color-action-neutral-hover: var(--neutral-100);
  --color-action-neutral-pressed: var(--neutral-200);
  --color-action-danger-default: var(--red-600);
  --color-action-danger-hover: var(--red-700);
  --color-action-disabled: var(--neutral-100);
  --color-status-success: var(--green-600);
  --color-status-warning: var(--amber-400);
  --color-status-danger: var(--red-600);
  --color-status-info: var(--blue-600);
  --color-data-1: var(--blue-700);
  --color-data-2: var(--teal-500);
  --color-data-3: var(--amber-400);
  --color-data-4: var(--red-500);
  --color-data-5: var(--green-500);
  --color-data-6: var(--neutral-500);
  --bg-glass: #ffffff1a;
  --border-glass: #ffffff38;
  --text-inverse-muted: #ffffffbf;
  --bg-scrim: #0d14407a;

  /* ---- Dimension (Desktop) ---- */
  --space-0: 0px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  --border-width-hairline: 1px;
  --border-width-thick: 2px;
  --border-width-focus: 3px;
  --size-container: 1280px;
  --size-content: 800px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --layout-page-gutter: 320px;
  --layout-footer-inset: 304px;

  /* ---- Typography (Desktop) ---- */
  --font-sans: 'Inter', Arial, sans-serif;
  --font-display: 'Inter', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-size-display-xl: 64px;
  --line-height-display-xl: 68px;
  --font-size-display-lg: 52px;
  --line-height-display-lg: 56px;
  --font-size-heading-h1: 40px;
  --line-height-heading-h1: 46px;
  --font-size-heading-h2: 32px;
  --line-height-heading-h2: 38px;
  --font-size-heading-h3: 26px;
  --line-height-heading-h3: 32px;
  --font-size-heading-h4: 21px;
  --line-height-heading-h4: 28px;
  --font-size-heading-h5: 18px;
  --line-height-heading-h5: 24px;
  --font-size-body-lg: 19px;
  --line-height-body-lg: 30px;
  --font-size-body-md: 16px;
  --line-height-body-md: 26px;
  --font-size-body-sm: 14px;
  --line-height-body-sm: 22px;
  --font-size-label-md: 14px;
  --line-height-label-md: 20px;
  --font-size-label-sm: 12px;
  --line-height-label-sm: 16px;
  --font-size-caption: 13px;
  --line-height-caption: 18px;
  --font-size-numeric-xl: 56px;
  --line-height-numeric-xl: 60px;
  --font-size-numeric-lg: 34px;
  --line-height-numeric-lg: 40px;

  /* ---- Effect styles ---- */
  --shadow-drop: 8px 8px 16px 4px rgba(133, 139, 146, 0.06);
  --shadow-elevation-1: 0 1px 2px 0 rgba(17, 19, 28, 0.06), 0 1px 3px 0 rgba(17, 19, 28, 0.04);
  --shadow-elevation-2: 0 4px 12px -2px rgba(17, 19, 28, 0.08), 0 2px 4px -1px rgba(17, 19, 28, 0.04);
  --shadow-elevation-3: 0 16px 40px -8px rgba(17, 19, 28, 0.16), 0 4px 8px -2px rgba(17, 19, 28, 0.06);
  --shadow-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #475cc9;
}

/* ---- Tablet ---- */
@media (max-width: 1279px) {
  :root {
    --space-10: 32px;
    --space-12: 40px;
    --space-16: 48px;
    --space-20: 64px;
    --size-container: 770px;
    --size-content: 770px;
    --layout-page-gutter: 32px;
    --layout-footer-inset: 16px;
    --font-size-display-xl: 52px;
    --line-height-display-xl: 56px;
    --font-size-display-lg: 42px;
    --line-height-display-lg: 46px;
    --font-size-heading-h1: 34px;
    --line-height-heading-h1: 40px;
    --font-size-heading-h2: 28px;
    --line-height-heading-h2: 34px;
    --font-size-heading-h3: 24px;
    --line-height-heading-h3: 30px;
    --font-size-heading-h4: 20px;
    --line-height-heading-h4: 27px;
    --font-size-heading-h5: 17px;
    --font-size-body-lg: 18px;
    --line-height-body-lg: 28px;
    --line-height-body-sm: 21px;
    --font-size-numeric-xl: 44px;
    --line-height-numeric-xl: 48px;
    --font-size-numeric-lg: 30px;
    --line-height-numeric-lg: 36px;
  }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  :root {
    --space-8: 24px;
    --space-10: 24px;
    --space-12: 24px;
    --space-16: 32px;
    --space-20: 48px;
    --size-container: 358px;
    --size-content: 358px;
    --layout-page-gutter: 16px;
    --layout-footer-inset: 8px;
    --font-size-display-xl: 40px;
    --line-height-display-xl: 44px;
    --font-size-display-lg: 34px;
    --line-height-display-lg: 38px;
    --font-size-heading-h1: 28px;
    --line-height-heading-h1: 34px;
    --font-size-heading-h2: 24px;
    --line-height-heading-h2: 30px;
    --font-size-heading-h3: 21px;
    --line-height-heading-h3: 28px;
    --font-size-heading-h4: 19px;
    --line-height-heading-h4: 26px;
    --font-size-body-lg: 17px;
    --line-height-body-lg: 26px;
    --line-height-body-md: 24px;
    --line-height-body-sm: 20px;
    --font-size-numeric-xl: 36px;
    --line-height-numeric-xl: 40px;
    --font-size-numeric-lg: 26px;
    --line-height-numeric-lg: 32px;
  }
}

/* ---- Color (Dark) — data-theme="dark" ile etkinleşir ---- */
:root[data-theme="dark"] {
  --color-bg-canvas: var(--neutral-950);
  --color-bg-surface: var(--neutral-900);
  --color-bg-subtle: var(--neutral-900);
  --color-bg-muted: var(--neutral-800);
  --color-bg-inverse: var(--neutral-50);
  --color-bg-brand: var(--blue-800);
  --color-bg-brand-subtle: var(--blue-950);
  --color-bg-accent: var(--teal-400);
  --color-bg-accent-subtle: var(--teal-950);
  --color-bg-success-subtle: var(--green-950);
  --color-bg-warning-subtle: var(--amber-950);
  --color-bg-danger-subtle: var(--red-950);
  --color-bg-info-subtle: var(--blue-950);
  --color-text-primary: var(--neutral-50);
  --color-text-secondary: var(--neutral-300);
  --color-text-tertiary: var(--neutral-400);
  --color-text-disabled: var(--neutral-600);
  --color-text-inverse: var(--neutral-950);
  --color-text-brand: var(--blue-300);
  --color-text-accent: var(--teal-300);
  --color-text-on-brand: var(--neutral-0);
  --color-text-on-action: var(--neutral-950);
  --color-text-on-accent: var(--neutral-950);
  --color-text-success: var(--green-300);
  --color-text-warning: var(--amber-300);
  --color-text-danger: var(--red-300);
  --color-text-info: var(--blue-300);
  --color-border-subtle: var(--neutral-900);
  --color-border-default: var(--neutral-800);
  --color-border-strong: var(--neutral-50);
  --color-border-brand: var(--blue-300);
  --color-border-focus: var(--blue-300);
  --color-border-danger: var(--red-400);
  --color-border-success: var(--green-400);
  --color-icon-primary: var(--neutral-50);
  --color-icon-secondary: var(--neutral-400);
  --color-icon-brand: var(--blue-300);
  --color-icon-accent: var(--teal-300);
  --color-icon-inverse: var(--neutral-950);
  --color-action-primary-default: var(--blue-300);
  --color-action-primary-hover: var(--blue-200);
  --color-action-primary-pressed: var(--blue-100);
  --color-action-secondary-default: var(--teal-300);
  --color-action-secondary-hover: var(--teal-200);
  --color-action-secondary-pressed: var(--teal-100);
  --color-action-neutral-default: var(--neutral-900);
  --color-action-neutral-hover: var(--neutral-800);
  --color-action-neutral-pressed: var(--neutral-700);
  --color-action-danger-default: var(--red-400);
  --color-action-danger-hover: var(--red-300);
  --color-action-disabled: var(--neutral-800);
  --color-status-success: var(--green-400);
  --color-status-warning: var(--amber-300);
  --color-status-danger: var(--red-400);
  --color-status-info: var(--blue-400);
  --color-data-1: var(--blue-300);
  --color-data-2: var(--teal-400);
  --color-data-3: var(--amber-300);
  --color-data-4: var(--red-400);
  --color-data-5: var(--green-400);
  --color-data-6: var(--neutral-400);
  --bg-scrim: #0d1440b2;
}