/* Hallmark · tokens · theme: custom "Etiket Föyü"
 * vibe: "thermal-label datasheet, clinical, measured, signal yellow"
 * axes: light / display-condensed-bold / chromatic-yellow ~103°
 */
@property --acc { syntax: "<color>"; inherits: true; initial-value: #0078d7; }

:root {
  /* paper — clean white with a clinical blue cast */
  --color-paper:    oklch(98.6% 0.004 240);
  --color-paper-2:  #eaf4fa;                  /* soft medical blue — band sections */
  --color-paper-3:  oklch(93.2% 0.016 240);

  /* ink — navy-tinted near black */
  --color-ink:      oklch(21% 0.025 258);
  --color-ink-2:    oklch(38% 0.030 258);
  --color-muted:    oklch(48% 0.016 258);
  --color-rule:     oklch(82% 0.012 258);
  --color-rule-2:   oklch(89% 0.010 258);

  /* brand */
  /* brand blue — from the ilaçtarif® logo */
  --color-brand:       #0e71b8;
  --color-brand-light: #167dc2;
  --color-brand-deep:  #07558f;
  --color-navy:      var(--color-brand-deep);
  --color-navy-deep: #06466f;               /* deep clinical blue — dark chapters */
  --color-navy-ink:  oklch(96% 0.010 255);   /* text on navy */
  --color-navy-line: oklch(96% 0.010 255 / .45);
  --color-navy-rule: oklch(96% 0.010 255 / .25);
  --color-blue:      var(--color-brand);

  /* accent — the label yellow as UI: primary CTA only */
  --color-accent:      oklch(90% 0.170 103); /* ≈ #f2df3a */
  --color-accent-deep: oklch(85% 0.170 98);
  --color-accent-ink:  var(--color-ink);

  /* the label material — product, not UI accent (same yellow, separate role) */
  --color-label:       oklch(90% 0.170 103);
  --color-label-black: oklch(16% 0.006 100);

  /* sibling products (cross-sell cards only) */
  --color-evpn:      oklch(46% 0.130 255);   /* EczaneVPN blue */
  --color-evpn-lime: oklch(91% 0.200 125);   /* EczaneVPN social lime */
  --color-mt:        oklch(60% 0.140 235);   /* MobilTarif cyan #018bcb */
  --color-mt-deep:   #0073aa;               /* tape behind white text, 4.5:1 */
  --color-mt-ink:    oklch(99% 0.005 235);

  /* status + device details */
  --color-error:   oklch(52% 0.180 28);
  --color-scan:    oklch(62% 0.220 28);   /* barcode scanner laser */
  --color-led:     oklch(74% 0.180 145);
  --color-led-off: oklch(42% 0.040 145);

  /* focus — blue, not yellow: yellow has no contrast on thermal paper */
  --color-focus: oklch(55% 0.190 252);

  /* ilaçtarif® desktop app — colours sampled from the real Windows client */
  /* "Tema Seç": MahApps 2.0 accent bases, in the app's own order */
  --app-acc-blue:     #0078d7;
  --app-acc-green:    #60a917;
  --app-acc-purple:   #6459df;
  --app-acc-pink:     #f472d0;
  --app-acc-orange:   #fa6800;
  --app-acc-red:      #e51400;
  --app-acc-lime:     #a4c400;
  --app-acc-emerald:  #008a00;
  --app-acc-cyan:     #1ba1e2;
  --app-acc-cobalt:   #0050ef;
  --app-acc-indigo:   #6a00ff;
  --app-acc-violet:   #aa00ff;
  --app-acc-magenta:  #d80073;
  --app-acc-amber:    #f0a30a;
  --app-acc-yellow:   #fede06;
  --app-acc-olive:    #6d8764;
  --app-blue:      #3393df;   /* header + workspace */
  --app-side:      #242426;
  --app-side-on:   #0767b4;
  --app-ink:       #1a1a1a;
  --app-white:     #ffffff;
  --app-line:      #d4d4d4;
  --app-line-2:    #bdbdbd;
  --app-side-hover: #3a3a3d;
  --app-pick:      #6aaee6;
  --app-track:     #f0f0f0;
  --app-muted:     #767676;
  --app-sub:       #363636;
  --app-sub-2:     #4a4a4a;
  --app-sec:       #298edd;
  --app-light:     #cce4f7;
  --app-orange:    #ffab00;
  --app-orange-2:  #ffc24d;
  --app-yellow:    #ffff00;
  --app-yellow-2:  #e3e33a;
  --app-x:         #805600;
  --app-pp:        #8cb3e5;
  --app-pp-2:      #a9c7ee;
  --app-pp-head:   #026ed1;
  --app-toggle:    #0078d7;
  --app-pill:      #333333;
  --app-green:     #48c78e;
  --app-scan:      #2fb344;
  --app-kalan:     #b82fd6;   /* app uses #df41ff; darkened for 4.5:1 with white */
  --app-wa:        #25d366;
  --app-uz:        #d6342b;   /* app #ef443b, darkened for 4.5:1 */
  --app-tel:       #1272c0;   /* app #1483da, darkened for 4.5:1 */
  --app-satin:     #178508;   /* app #1b9a0a, darkened for 4.5:1 */
  --app-status:    #333333;
  --app-red:       #e81123;
  --app-shadow:    0 3px 6px rgb(0 0 0 / .35);
  --app-shadow-lg: 0 3px 10px rgb(0 0 0 / .45);
  --app-shade:     rgb(0 0 0 / .4);

  /* shadows carry the ink hue */
  --shadow-label: 0 1px 0 oklch(21% 0.025 258 / .08), 0 18px 32px -14px oklch(21% 0.025 258 / .45);
  --shadow-pill:  0 1px 0 oklch(21% 0.025 258 / .06), 0 10px 30px -12px oklch(21% 0.025 258 / .3);
  --shadow-receipt: 0 14px 18px oklch(21% 0.025 258 / .14);
  --shadow-film:   0 30px 60px -36px oklch(21% 0.025 258 / .55);
  --glare:         oklch(99% 0.012 100 / .3);
  --shadow-device:  0 18px 30px -14px oklch(21% 0.025 258 / .55);

  /* type */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-arabic:  "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --font-app:     "Segoe UI", "Segoe UI Variable Text", system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1.0625rem;
  --text-lg:   1.375rem;
  --text-xl:   clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --text-2xl:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --text-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.25rem);

  /* 4-pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  /* Alternet family signature: the wordmark cut corner */
  --radius-cut: 3px 10px 3px 3px;
  --radius-cut-lg: 4px 18px 4px 4px;

  --rule-hair: 1px;
  --rule-bold: 2px;

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-med:   420ms;
  --dur-long:  900ms;

  /* layering */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 40;
  --z-sheet: 50;
  --z-skip: 60;

  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2rem);
}