/* ==========================================================================
   MetuSoft Design System V2 — tokens
   One source for the public site (assets/css/metusoft.css) and the admin panel
   (boss/assets/css/admin.css). Documentation: docs/design/DESIGN_SYSTEM.md (V2).

   Layers
     1. Primitives  — raw palette and scales. Components never read these directly.
     2. Semantic    — what a value is for (text, surface, border, action, feedback).
     3. Component   — a few shared sizes (control heights, header, sidebar).
   Rules
     - Colours come only from this file. A new colour needs a semantic name first.
     - Type uses the scale below and three weights: 400 / 500 / 600.
     - Spacing uses the 4px scale; radii and shadows use their named steps.
   ========================================================================== */

/* ---------- Fonts: Inter 4 variable (SIL OFL 1.1, assets/fonts/inter/OFL.txt) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2?v=2") format("woff2");
  /* B-103: Ğ ğ İ Ş ş (U+011E-011F, U+0130, U+015E-015F) come from the 3 KB Turkish face below */
  unicode-range: U+0100-011D, U+0120-012F, U+0131-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter/inter-latin-wght-normal.woff2?v=2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* B-103: the five Turkish letters missing from the latin face, cut from the upstream latin-ext file
   (tools/build/font-subset.mjs) — 3 KB instead of the 85 KB latin-ext download on every Turkish page */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter/inter-tr-wght-normal.woff2?v=2") format("woff2");
  unicode-range: U+011E-011F, U+0130, U+015E-015F;
}

:root {
  /* ---------- 1. Primitives ---------- */

  /* Azure — the logo's blue (#2070F0 → #00B0F0). 600 is the action colour (5.15:1 on white). */
  --ms-blue-50: #eef5ff;
  --ms-blue-100: #d9e8ff;
  --ms-blue-200: #bcd6ff;
  --ms-blue-300: #8ebbff;
  --ms-blue-400: #5a98fa;
  --ms-blue-500: #2f78f0;
  --ms-blue-600: #1a66e5;
  --ms-blue-700: #1553c0;
  --ms-blue-800: #15449a;
  --ms-blue-900: #163b7a;
  --ms-blue-950: #0f2350;

  /* Cyan — the logo's light end. Decorative only (2.2:1 on white): lines, dots, chart accents. */
  --ms-cyan-400: #38c6f4;
  --ms-cyan-500: #0fb0ec;

  /* Navy — the logo's wordmark. Dark surfaces and the strongest text. */
  --ms-navy-700: #1b2250;
  --ms-navy-800: #121840;
  --ms-navy-900: #0b1033;
  --ms-navy-950: #070a22;

  /* Neutral — cool grey, slightly blue so it sits with navy and azure. */
  --ms-gray-0: #ffffff;
  --ms-gray-25: #fbfcfd;
  --ms-gray-50: #f5f7fa;
  --ms-gray-100: #edf0f5;
  --ms-gray-200: #e1e6ee;
  --ms-gray-300: #cbd2de;
  --ms-gray-400: #98a2b5;
  --ms-gray-500: #6b7385;
  --ms-gray-600: #525a6d;
  --ms-gray-700: #3d4556;
  --ms-gray-800: #262c3a;
  --ms-gray-900: #151a26;

  /* Feedback hues: 600 passes 4.5:1 on white and on its 50 tint; 700 is for text on tints (6.6–6.8:1) */
  --ms-green-50: #e9f7f0;
  --ms-green-200: #b7e2cb;
  --ms-green-600: #0e7a4a;
  --ms-green-700: #0b6139;
  --ms-amber-50: #fff6e8;
  --ms-amber-200: #f6d79f;
  --ms-amber-600: #b45309;
  --ms-amber-700: #8f4207;
  --ms-red-50: #fdeeee;
  --ms-red-200: #f4c4c4;
  --ms-red-600: #c0262d;
  --ms-red-700: #9b1c22;

  /* ---------- 2. Semantic: colour ---------- */
  --ms-color-bg: var(--ms-gray-0);
  --ms-color-bg-subtle: var(--ms-gray-50);       /* alternating sections, admin canvas */
  --ms-color-bg-muted: var(--ms-gray-100);        /* wells, hovered rows */
  --ms-color-surface: var(--ms-gray-0);           /* cards, inputs, menus */
  --ms-color-surface-inverse: var(--ms-navy-900); /* dark bands, footer, admin sidebar */
  --ms-color-surface-inverse-2: var(--ms-navy-800);

  --ms-color-border: var(--ms-gray-200);
  --ms-color-border-strong: var(--ms-gray-300);
  --ms-color-border-inverse: rgb(255 255 255 / 0.12);

  --ms-color-text: var(--ms-navy-900);            /* headings, primary text — 18.5:1 */
  --ms-color-text-body: var(--ms-gray-700);       /* running text — 9.6:1 */
  --ms-color-text-secondary: var(--ms-gray-600);  /* supporting text — 6.9:1 */
  --ms-color-text-tertiary: var(--ms-gray-500);   /* meta, on white only — 4.8:1 (4.4 on gray-50) */
  --ms-color-text-placeholder: var(--ms-gray-400);
  --ms-color-text-inverse: #ffffff;
  --ms-color-text-inverse-secondary: #aab4d4;     /* 9.0:1 on navy-900 */

  --ms-color-primary: var(--ms-blue-600);
  --ms-color-primary-hover: var(--ms-blue-700);
  --ms-color-primary-active: var(--ms-blue-800);
  --ms-color-primary-subtle: var(--ms-blue-50);
  --ms-color-primary-border: var(--ms-blue-200);
  --ms-color-primary-text: var(--ms-blue-700);    /* links, tinted labels — 6.9:1 (6.3 on blue-50) */
  --ms-color-on-primary: #ffffff;
  --ms-color-link-inverse: #8ebbff;

  --ms-color-success: var(--ms-green-600);
  --ms-color-success-subtle: var(--ms-green-50);
  --ms-color-success-border: var(--ms-green-200);
  --ms-color-warning: var(--ms-amber-600);
  --ms-color-warning-subtle: var(--ms-amber-50);
  --ms-color-warning-border: var(--ms-amber-200);
  --ms-color-danger: var(--ms-red-600);
  --ms-color-danger-hover: var(--ms-red-700);
  --ms-color-danger-subtle: var(--ms-red-50);
  --ms-color-danger-border: var(--ms-red-200);
  --ms-color-info: var(--ms-blue-700);
  --ms-color-info-subtle: var(--ms-blue-50);
  --ms-color-info-border: var(--ms-blue-200);

  --ms-color-accent: var(--ms-cyan-500);          /* decorative only */
  --ms-color-bg-tint: #f3f7fe;                    /* azure-tinted canvas (catalogue, gallery stage) */
  --ms-color-savings: var(--ms-green-700);        /* "x TL tasarruf" text — 6.8:1 on green-50 */
  --ms-color-whatsapp: var(--ms-green-600);       /* WhatsApp action: recognisable green, white text 5.3:1 */
  --ms-color-whatsapp-hover: var(--ms-green-700);
  --ms-color-focus: rgb(26 102 229 / 0.45);

  /* ---------- 2. Semantic: typography ---------- */
  --ms-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ms-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Size scale (px at 16px root): 12 · 13 · 14 · 16 · 18 · 20 · 24 · 30 · 38 · 48 · 60 */
  --ms-font-size-2xs: 0.75rem;
  --ms-font-size-xs: 0.8125rem;
  --ms-font-size-sm: 0.875rem;
  --ms-font-size-md: 1rem;
  --ms-font-size-lg: 1.125rem;
  --ms-font-size-xl: 1.25rem;
  --ms-font-size-2xl: 1.5rem;
  --ms-font-size-3xl: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
  --ms-font-size-4xl: clamp(1.875rem, 1.3rem + 2vw, 2.375rem);
  --ms-font-size-5xl: clamp(2.125rem, 1.3rem + 3vw, 3rem);
  --ms-font-size-6xl: clamp(2.375rem, 1.2rem + 4.4vw, 3.75rem);

  --ms-font-weight-regular: 400;
  --ms-font-weight-medium: 500;
  --ms-font-weight-semibold: 600;

  --ms-line-height-tight: 1.08;   /* display */
  --ms-line-height-heading: 1.2;
  --ms-line-height-snug: 1.4;     /* UI text, labels */
  --ms-line-height-body: 1.6;

  --ms-tracking-display: -0.035em;
  --ms-tracking-heading: -0.022em;
  --ms-tracking-tight: -0.011em;
  --ms-tracking-caps: 0.06em;

  /* ---------- 2. Semantic: space, shape, depth, motion ---------- */
  --ms-space-0: 0;
  --ms-space-px: 1px;
  --ms-space-0-5: 2px;
  --ms-space-1: 4px;
  --ms-space-1-5: 6px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 20px;
  --ms-space-6: 24px;
  --ms-space-7: 32px;
  --ms-space-8: 40px;
  --ms-space-9: 48px;
  --ms-space-10: 64px;
  --ms-space-11: 80px;
  --ms-space-12: 96px;
  --ms-space-13: 128px;
  /* UI refresh 2026-10: tighter vertical rhythm (was 64–128 / 48–80 px — the "empty" feeling of long pages) */
  --ms-section-y: clamp(56px, 2.5rem + 3.2vw, 104px);
  --ms-section-y-tight: clamp(40px, 2rem + 2.4vw, 72px);

  --ms-radius-xs: 4px;
  --ms-radius-sm: 6px;   /* badges, small controls */
  --ms-radius-md: 8px;   /* buttons, inputs */
  --ms-radius-lg: 12px;  /* cards, menus, modals */
  --ms-radius-xl: 16px;  /* hero media, large panels */
  --ms-radius-full: 999px;

  --ms-shadow-xs: 0 1px 2px rgb(11 16 51 / 0.05);
  --ms-shadow-sm: 0 1px 2px rgb(11 16 51 / 0.04), 0 1px 3px rgb(11 16 51 / 0.06);
  --ms-shadow-md: 0 2px 4px -1px rgb(11 16 51 / 0.05), 0 6px 16px -4px rgb(11 16 51 / 0.1);
  --ms-shadow-lg: 0 4px 8px -2px rgb(11 16 51 / 0.05), 0 16px 32px -8px rgb(11 16 51 / 0.14);
  --ms-shadow-xl: 0 24px 56px -16px rgb(11 16 51 / 0.24);
  /* UI refresh 2026-10: layered, faintly azure-tinted depth for interactive cards and media */
  --ms-shadow-card: 0 1px 2px rgb(11 16 51 / 0.04), 0 2px 8px -2px rgb(11 16 51 / 0.06);
  --ms-shadow-card-hover: 0 2px 4px rgb(11 16 51 / 0.04), 0 18px 40px -14px rgb(21 83 192 / 0.28);
  --ms-shadow-media: 0 2px 6px rgb(11 16 51 / 0.06), 0 28px 60px -20px rgb(15 35 80 / 0.38);
  --ms-shadow-primary: 0 1px 2px rgb(21 68 154 / 0.3), 0 6px 16px -6px rgb(26 102 229 / 0.55);
  --ms-ring-focus: 0 0 0 3px var(--ms-color-focus);
  --ms-ring-danger: 0 0 0 3px rgb(192 38 45 / 0.25);

  --ms-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ms-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ms-duration-fast: 120ms;
  --ms-duration-base: 200ms;
  --ms-duration-slow: 320ms;

  --ms-z-sticky: 100;
  --ms-z-header: 900;
  --ms-z-drawer: 1000;
  --ms-z-modal: 1100;
  --ms-z-toast: 1200;

  /* ---------- 3. Component sizes ---------- */
  --ms-control-sm: 36px;
  --ms-control-md: 44px;  /* minimum touch target */
  --ms-control-lg: 52px;
  /* Content widths grow with the viewport on large screens (FAZ 1): 1200/1320 px up to ~1440 px wide,
     then up to 1440/1600 px at 1920 px — wide monitors get more content, not just wider margins. */
  --ms-container: clamp(1200px, 84vw, 1440px);
  --ms-container-wide: clamp(1320px, 86vw, 1600px);
  --ms-gutter: clamp(16px, 4vw, 32px);
  --ms-header-h: 68px;
  --ms-admin-sidebar-w: 264px;
  --ms-admin-topbar-h: 60px;

  /* Breakpoints (reference — CSS custom properties cannot be used in @media):
     sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px. Mobile first: min-width queries. */
}