/* OFA palette: the single source of color tokens for the public theme.
   Corporate palette 'Mürekkep, Elektrik ve pastel yüzeyler': Mürekkep #111318 (dark surfaces and copy),
   Elektrik #005EFB (the logo's blue, the one accent), Kağıt #FAFAF8 (light canvas), and one pastel per
   sector, derived from the sector's own hue (pastel.css). */
:root{
	/* Dark neutrals: night blue (names kept for existing components). */
	--ofa-charcoal-950:#111318;
	--ofa-charcoal-900:#191b21;
	--ofa-charcoal-850:#1f2229;
	--ofa-charcoal-800:#2a2d35;
	--ofa-charcoal-700:#3a3e47;
	--ofa-charcoal-925:#15171c;
	--ofa-charcoal-1000:#0b0c0f;
	--ofa-white:#fff;
	--ofa-gray-50:#fcfcfb;
	--ofa-gray-100:#fafaf8;
	--ofa-gray-200:#ececea;
	--ofa-gray-300:#dcdcd8;
	--ofa-gray-500:#6b6d75;
	--ofa-gray-600:#55575f;
	--ofa-text-on-dark:#fafaf8;
	--ofa-muted-on-dark:#b9bac0;
	--ofa-faint-on-dark:#8a8c94;
	/* Accent: OFA Volt #005EFB on every surface. 500 = hover on dark surfaces, press = hover on light ones,
	   300 = Volt for small text on dark surfaces (Volt itself is for fills and large type there). */
	--ofa-navy-950:#111318;
	--ofa-navy-700:#005efb;
	--ofa-volt-press:#004ed4;
	--ofa-navy-600:#005efb;
	--ofa-navy-500:#2b78ff; /* hover of Volt on dark surfaces */
	--ofa-navy-300:#8fb2ff;
	--ofa-navy-50:#eaf1ff;
	--ofa-navy-rgb:22 24 29;
	--ofa-navy-600-rgb:0 94 251;
	--ofa-navy-soft:rgb(0 94 251 / .2);
	--ofa-hue:176;
	--ofa-sector-hue-mode:brand;
	--ofa-error:#c94f48;
	--ofa-warning:#a56b22;

	/* Existing component names remain as aliases while components migrate. */
	--ink:var(--ofa-charcoal-850);
	--ink-2:var(--ofa-charcoal-900);
	--ink-3:var(--ofa-charcoal-850);
	--ink-line:rgb(255 255 255 / .12);
	--paper:var(--ofa-charcoal-950);
	--surface:var(--ofa-charcoal-900);
	--sunk:var(--ofa-charcoal-925);
	--line:var(--ofa-charcoal-800);
	--line-2:var(--ofa-charcoal-700);
	--text:var(--ofa-text-on-dark);
	--muted:var(--ofa-muted-on-dark);
	--faint:var(--ofa-faint-on-dark);
	--brand:var(--ofa-navy-600);
	--brand-2:var(--ofa-navy-600);
	--brand-ink:var(--ofa-navy-300);
	--brand-soft:var(--ofa-navy-soft);
	--lime:var(--ofa-navy-600);
	--lime-ink:var(--ofa-white);
	--coral:var(--ofa-error);
	--amber:var(--ofa-warning);
	--h:var(--ofa-hue);
	--tint:var(--ofa-navy-600);
	--tint-soft:var(--ofa-navy-soft);
	--tint-ink:var(--ofa-navy-300);
	--sh-1:0 1px 2px rgb(0 0 0 / .22),0 2px 6px rgb(0 0 0 / .16);
	--sh-2:0 2px 4px rgb(0 0 0 / .18),0 14px 34px -12px rgb(0 0 0 / .45);
	--sh-3:0 32px 72px -30px rgb(0 0 0 / .65);
	--sh:176;
	--ih:176;
}

/* Sector-specific hues collapse to the same brand identity. */
[style*="--h:"]{--tint:var(--ofa-navy-600);--tint-soft:var(--ofa-navy-soft);--tint-ink:var(--ofa-navy-300)}

/* The home page keeps its charcoal canvas but shares the same accent and type. */
.home{
	--bg0:var(--ofa-charcoal-950);
	--bg1:var(--ofa-charcoal-900);
	--bg2:var(--ofa-charcoal-850);
	--blue:var(--ofa-navy-600);
	--cyan:var(--ofa-navy-300);
	--violet:var(--ofa-navy-500);
	--gline:rgb(255 255 255 / .1);
	--gline2:rgb(255 255 255 / .17);
	--txt:var(--ofa-text-on-dark);
	--txt2:var(--ofa-muted-on-dark);
	--txt3:var(--ofa-faint-on-dark);
	--accent:var(--ofa-navy-600);
	--accent-2:var(--ofa-navy-600);
	--surface:var(--ofa-charcoal-900);
	--icon:var(--ofa-muted-on-dark);
}

/* The product page uses the same night-blue surfaces, light copy, and night-blue actions. */
.tpx{
	--bg:var(--ofa-charcoal-950);
	--surface:var(--ofa-charcoal-900);
	--surface-2:var(--ofa-charcoal-925);
	--border:var(--ofa-charcoal-800);
	--border-hover:var(--ofa-charcoal-700);
	--text:var(--ofa-text-on-dark);
	--text-muted:var(--ofa-muted-on-dark);
	--accent:var(--ofa-navy-600);
	--accent-hover:var(--ofa-navy-500);
	--shadow-card:var(--sh-2);
	--ok:var(--ofa-navy-300);
	--ok-soft:var(--ofa-navy-soft);
	--bad:#e5807a;
	--bad-soft:rgb(201 79 72 / .18);
	--warn:#d9a24f;
	--warn-soft:rgb(165 107 34 / .2);
}

/* Calm, solid CTAs and brand marks; keep gradients out of the action color. */
.btn--primary,.brand__mark,.cta__box,.hx-btn--primary,.hx-card__buy,.head-cta{
	background:var(--ofa-navy-600);
	background-image:none;
	border-color:var(--ofa-navy-600);
	color:var(--ofa-white);
}
.btn--primary{--bg:var(--ofa-navy-600);--fg:var(--ofa-white);--bd:var(--ofa-navy-600);box-shadow:0 8px 20px -12px rgb(var(--ofa-navy-600-rgb) / .6)}
.btn--primary:hover,.hx-btn--primary:hover,.hx-card__buy:hover,.head-cta:hover{background:var(--ofa-navy-500);border-color:var(--ofa-navy-500);box-shadow:0 10px 24px -14px rgb(var(--ofa-navy-600-rgb) / .65)}
.brand__mark{box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 6px 16px -8px rgb(var(--ofa-navy-600-rgb) / .55)}
.cta__box{box-shadow:0 24px 48px -34px rgb(var(--ofa-navy-600-rgb) / .65)}
:focus-visible,.hx-btn:focus-visible,.hx-round:focus-visible{outline-color:var(--ofa-navy-500)}
.finder:focus-within,.hx-search:focus-within{border-color:var(--ofa-navy-500);box-shadow:0 0 0 3px rgb(var(--ofa-navy-600-rgb) / .18)}
.live-dot{background:var(--ofa-navy-500);box-shadow:0 0 0 0 rgb(var(--ofa-navy-600-rgb) / .45)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--ofa-navy-600-rgb) / .45)}70%{box-shadow:0 0 0 9px rgb(var(--ofa-navy-600-rgb) / 0)}100%{box-shadow:0 0 0 0 rgb(var(--ofa-navy-600-rgb) / 0)}}

/* Shared surfaces and accents used by catalogue, sector and detail components. */
.site-head{background:rgb(17 19 24 / .92)}
.site-head.is-stuck,.is-template .site-head{border-bottom-color:var(--ofa-charcoal-800)}
.is-template .site-head{background:rgb(17 19 24 / .92)}
.site-foot{background-color:var(--ofa-charcoal-1000);color:var(--ofa-muted-on-dark)}
.included,.buy,.sticky-buy,.card__live{background-color:var(--ofa-charcoal-850);color:var(--ofa-text-on-dark)}
/* Active and selected states: the accent. */
.chip.is-on,.pager__nums a[aria-current],.toggle input:checked + span,.subpick__opt.is-on,.woocommerce-MyAccount-navigation .is-active a{background-color:var(--ofa-navy-600);border-color:var(--ofa-navy-600);color:var(--ofa-white)}
.chip.is-on em,.toggle input:checked + span em,.subpick__opt.is-on .subpick__n,.subpick__opt.is-on .subpick__n em{color:rgb(255 255 255 / .85)}
.opt input:checked,.sector-group:has(.subs input:checked) > .opt input,.switch input:checked + span{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600)}
.subpick__opt.is-on .subpick__dot{background:var(--ofa-white);border-color:var(--ofa-white)}.subpick__opt.is-on .subpick__dot::after{border-color:var(--ofa-navy-600)}
.chip--all:hover{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600);color:var(--ofa-white)}
.badge--new,.faq__item[open] .faq__icon{background:var(--ofa-navy-soft);color:var(--ofa-navy-300)}
.badge--hot{background:var(--ofa-charcoal-850);color:var(--ofa-white)}
.step__icon{background:var(--ofa-charcoal-850);color:var(--ofa-navy-300)}
.card__family,.tpx-kicker,.tpx-care__grid .icon,.tpx-ticks .icon,.features .icon,.ticks .icon{color:var(--ofa-navy-300)}
.sector::after{background:radial-gradient(closest-side,rgb(var(--ofa-navy-600-rgb) / .1),transparent)}
.sector:hover{border-color:var(--ofa-navy-500)}
.card__media,.browser__view{background:var(--ofa-charcoal-925)}
.sector:hover,.subpick__opt:not(.is-on):hover{border-color:var(--ofa-navy-500)}
.sector:hover .tile-icon,.subpick__head .tile-icon,.subpick__opt:not(.is-on):hover .subpick__n{background:var(--ofa-navy-600);color:var(--ofa-white)}
.cat-hero{background:var(--paper)}
.subpick__set{background:var(--surface);}
.subpick__set::before{background:var(--ofa-navy-600)}
.tpx-top{background:var(--bg);color:var(--text)}
.tpx-top::before{background-image:radial-gradient(rgb(var(--ofa-navy-600-rgb) / .045) 1px,transparent 1.5px)}
.tpx .btn--lime,.tpx .btn--primary,.tpx [data-care-add],.tpx .timeline li::before{background:var(--ofa-navy-600);border-color:var(--ofa-navy-600);color:var(--ofa-white)}
.tpx .btn--lime:hover,.tpx .btn--primary:hover,.tpx [data-care-add]:hover{background:var(--ofa-navy-500);border-color:var(--ofa-navy-500)}
.tpx .live-dot{background:var(--ofa-navy-500)}
.hx-stack__sector,.hx-card__sector,.hx-ind__icon .icon{color:var(--ofa-navy-300)}
.hx-stage::before,.hx-ind::before{background:radial-gradient(closest-side,rgb(var(--ofa-navy-600-rgb) / .12),transparent 72%)}
.hx-card::after{background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%),rgb(var(--ofa-navy-600-rgb) / .08),transparent 62%)}
.hx-search .finder__all a{color:var(--ofa-navy-300)}
.hx-flow__line span::after{box-shadow:0 0 12px 3px rgb(var(--ofa-navy-600-rgb) / .55)}
.hx-care__tag{background:var(--ofa-navy-soft);border-color:var(--ofa-navy-300);color:var(--ofa-navy-300)}
.hx-care::before,.hx-final__glow{background:radial-gradient(closest-side,rgb(var(--ofa-navy-600-rgb) / .08),transparent 72%)}
.hx-bg__aurora::before{background:radial-gradient(34% 30% at 70% 22%,rgb(var(--ofa-navy-600-rgb) / .07),transparent 70%),radial-gradient(30% 28% at 22% 34%,rgb(255 255 255 / .025),transparent 70%)}
.hx-bg__aurora::after{background:radial-gradient(40% 34% at 48% 88%,rgb(var(--ofa-navy-600-rgb) / .04),transparent 70%)}

/* Theme preview chrome is illustrative UI; keep its neutral browser controls intact. */

/* Antrasit canvas: components that hard-code light colours in app.css. */
.finder,.finder__list,.woocommerce input.input-text,.woocommerce select,.woocommerce textarea,.ofa-form input:focus,.ofa-form textarea:focus{background:var(--surface);color:var(--text)}
.card__chrome{background:rgb(31 34 41 / .94);border-bottom-color:var(--line)}
.card__chrome i,.browser__bar i,.browser__bar i:first-child,.browser__bar i:nth-child(2),.browser__bar i:nth-child(3){background:var(--ofa-charcoal-700)}
.ph{background:var(--ofa-charcoal-925) repeating-linear-gradient(135deg,rgb(255 255 255 / .03) 0 1px,transparent 1px 10px)}
.skeleton div{background:linear-gradient(90deg,var(--sunk),var(--ofa-charcoal-850),var(--sunk));background-size:200% 100%}
.browser__bar{background:var(--ofa-charcoal-850);border-color:var(--line)}.browser__bar span{background:var(--sunk);color:var(--muted)}
.viewer__loading{background:var(--sunk)}
.opt input:checked::after{border-color:var(--ofa-white)}
.toolbar select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23b8bcc6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E")}
.woocommerce-error,.ofa-form__err{background:rgb(201 79 72 / .14);border-color:rgb(201 79 72 / .45);color:#f2b3ae}
.woocommerce-message,.woocommerce-info,.ofa-form__ok{background:var(--ofa-navy-soft);border-color:rgb(var(--ofa-navy-600-rgb) / .55);color:var(--ofa-text-on-dark)}

/* Home on the same antrasit: the hero layer, header states, mock browser windows and overlays (home.css hard-codes navy/cream). */
.hx-hero__bg{background:var(--ofa-charcoal-950)}
.hx-hero__bg::before{background:radial-gradient(ellipse 46% 70% at 82% 30%,rgb(var(--ofa-navy-600-rgb) / .1) 0%,transparent 72%)}
.hx-hero__bg::after{background:none}
.home .site-head.is-stuck,.home .site-head.is-open{background:rgb(17 19 24 / .9)}
.home .site-head.is-open{background:rgb(17 19 24 / .97)}
.hx-search .finder__list{background:rgb(17 19 24 / .98)}
.hx-stack__win{background:var(--ofa-charcoal-900)}
.hx-stack__bar{background:var(--ofa-charcoal-850);border-bottom-color:var(--ofa-charcoal-800);color:var(--ofa-muted-on-dark)}
.hx-stack__bar i,.hx-stack__bar i:first-child,.hx-stack__bar i:nth-child(2),.hx-stack__bar i:nth-child(3){background:var(--ofa-charcoal-700)}
.hx-stack__bar em{background:var(--ofa-charcoal-925);border-color:var(--ofa-charcoal-800);color:var(--ofa-muted-on-dark)}
.hx-stack__bar b{color:var(--ofa-text-on-dark)}
.hx-stack__view,.hx-ind__shots,.hx-card__media{background:var(--ofa-charcoal-925)}
.hx-stack__cap,.hx-ind__cap,.hx-card__live-tag{background:rgb(17 19 24 / .88)}
.hx-corp__pillars li{background:var(--ofa-charcoal-900)}