/*
 * Tekir theme settings — CSS custom properties.
 *
 * Variable names mirror the production admin form fields exactly:
 *   - common/bus/themes/tekir/AdminThemeSettingForm.php (TekirThemeSetting)
 *   - common/bus/AdminGeneralSettingsForm.php          (GeneralSettings)
 *
 * Defaults below reflect the current demo look; the production build can
 * regenerate this file from the `theme_setting` JSON blob with no markup
 * changes anywhere else.
 *
 * Naming convention:  --tk-<group>-<field>   where <field> matches the
 * admin form attribute (snake_case → kebab-case).
 */

:root {
  /* ---------- Brand / identity (general_setting) ---------- */
  --tk-website-name: "Tekir";
  --tk-ms-tile-color: #111827;
  --tk-browser-theme-color: #111827;

  /* ---------- Layout ---------- */
  --tk-template-width: 1280;
  --tk-template-width-type: px;
  --tk-template-max-width: calc(var(--tk-template-width) * 1px);

  /* ---------- Icons ---------- */
  --tk-icon-light-color: #6b7280;
  --tk-icon-dark-color:  #0b1220;

  /* ---------- Preloader ---------- */
  --tk-preloader-color: #111827;

  /* ---------- Surfaces ---------- */
  --tk-theme-first-background-color:     #ffffff;
  --tk-theme-secondary-background-color: #f7f7f8;

  /* ---------- Body text ---------- */
  --tk-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tk-body-font-size:        16;
  --tk-body-font-size-unit:   px;
  --tk-body-font-weight:      400;
  --tk-body-font-color:       #0b1220;
  --tk-body-line-height:      1.55;
  --tk-body-line-height-unit: ;

  /* Pre-composed values (use these on the actual elements) */
  --tk-body-font-size-css:   calc(var(--tk-body-font-size) * 1px);
  --tk-body-line-height-css: var(--tk-body-line-height);

  /* ---------- Text color tokens ---------- */
  --tk-first-text-color:  #0b1220;
  --tk-second-text-color: #6b7280;

  /* ---------- Headings ---------- */
  --tk-first-heading-color:  #0b1220;
  --tk-second-heading-color: #2a3344;

  --tk-h1-font-family: "Manrope", "Inter", system-ui, sans-serif;
  --tk-h1-font-size:        2.4;    --tk-h1-font-size-unit: rem;
  --tk-h1-font-weight:      800;
  --tk-h1-font-color:       #0b1220;
  --tk-h1-background-font-color: transparent;

  --tk-h2-font-family: "Manrope", "Inter", system-ui, sans-serif;
  --tk-h2-font-size:        1.8;    --tk-h2-font-size-unit: rem;
  --tk-h2-font-weight:      700;
  --tk-h2-font-color:       #0b1220;
  --tk-h2-background-font-color: transparent;

  --tk-h3-font-family: "Manrope", "Inter", system-ui, sans-serif;
  --tk-h3-font-size:        1.4;    --tk-h3-font-size-unit: rem;
  --tk-h3-font-weight:      700;
  --tk-h3-font-color:       #0b1220;
  --tk-h3-background-font-color: transparent;

  --tk-h4-font-family: "Inter", system-ui, sans-serif;
  --tk-h4-font-size:        1.2;    --tk-h4-font-size-unit: rem;
  --tk-h4-font-weight:      600;
  --tk-h4-font-color:       #0b1220;
  --tk-h4-background-font-color: transparent;

  --tk-h5-font-family: "Inter", system-ui, sans-serif;
  --tk-h5-font-size:        1.05;   --tk-h5-font-size-unit: rem;
  --tk-h5-font-weight:      600;
  --tk-h5-font-color:       #0b1220;
  --tk-h5-background-font-color: transparent;

  --tk-h6-font-family: "Inter", system-ui, sans-serif;
  --tk-h6-font-size:        1;      --tk-h6-font-size-unit: rem;
  --tk-h6-font-weight:      600;
  --tk-h6-font-color:       #2a3344;
  --tk-h6-background-font-color: transparent;

  /* ---------- Links (a) ---------- */
  --tk-a-font-family: inherit;
  --tk-a-font-size:        ;        --tk-a-font-size-unit: ;
  --tk-a-font-weight:      500;

  --tk-a-link-font-color:            #0b1220;
  --tk-a-link-background-font-color: transparent;
  --tk-a-link-decoration:            none;

  --tk-a-visited-font-color:            #6b7280;
  --tk-a-visited-background-font-color: transparent;
  --tk-a-visited-decoration:            none;

  --tk-a-active-font-color:            #ff5a1f;
  --tk-a-active-background-font-color: transparent;
  --tk-a-active-decoration:            underline;

  --tk-a-hover-font-color:            #ff5a1f;
  --tk-a-hover-background-font-color: transparent;
  --tk-a-hover-decoration:            underline;

  /* ---------- Buttons ---------- */
  --tk-btn-text-color: #ffffff;
  --tk-btn-bg-color:   #111827;
  --tk-btn-bg2-color:  #1f2937;

  /* ---------- Forms ---------- */
  --tk-form-element-color:           #0b1220;
  --tk-form-element-secondary-color: #6b7280;
  --tk-form-element-light-color:     #e5e7eb;

  /* ---------- Product / pricing / cart / order ---------- */
  --tk-product-price-color:   #ff5a1f;
  --tk-checkout-title-color:  #0b1220;
  --tk-order-color:           #0b1220;
  --tk-order-price-color:     #ff5a1f;
  --tk-primary-cart-color:    #111827;
  --tk-cart-theme-bg:         #ffffff;
  --tk-cart-theme-color:      #0b1220;

  /* ---------- Language switcher ---------- */
  --tk-lang-switcher-selected-color:  #ff5a1f;
  --tk-lang-switcher-list-text-color: #0b1220;
  --tk-lang-switcher-list-bg-color:   #ffffff;

  /* ---------- Imagery dimensions (general_setting) ---------- */
  --tk-default-image-quality:               75;
  --tk-category-image-cover-width:          1600;
  --tk-category-image-cover-height:         600;
  --tk-news-image-cover-width:              1200;
  --tk-news-image-cover-height:             630;
  --tk-employee-image-width:                400;
  --tk-employee-image-height:               500;
  --tk-product-image-big-width:             1200;
  --tk-product-image-big-height:            1600;
  --tk-service-menu-category-image-width:   600;
  --tk-service-menu-category-image-height:  400;
}

/* =============================================================
 * Mobile overrides — admin form has a parallel mobile_* set of
 * fields. Applied below the standard tablet breakpoint.
 * ============================================================= */
@media (max-width: 767px) {
  :root {
    --tk-body-font-family:       "Inter", system-ui, sans-serif;
    --tk-body-font-size:         15;
    --tk-body-font-size-unit:    px;
    --tk-body-font-weight:       400;
    --tk-body-font-color:        #0b1220;
    --tk-body-line-height:       1.55;
    --tk-body-line-height-unit:  ;
    --tk-body-font-size-css:     calc(var(--tk-body-font-size) * 1px);

    --tk-h1-font-size: 1.9; --tk-h1-font-size-unit: rem;  --tk-h1-font-weight: 800;
    --tk-h2-font-size: 1.5; --tk-h2-font-size-unit: rem;  --tk-h2-font-weight: 700;
    --tk-h3-font-size: 1.25;--tk-h3-font-size-unit: rem;  --tk-h3-font-weight: 700;
    --tk-h4-font-size: 1.1; --tk-h4-font-size-unit: rem;  --tk-h4-font-weight: 600;
    --tk-h5-font-size: 1;   --tk-h5-font-size-unit: rem;  --tk-h5-font-weight: 600;
    --tk-h6-font-size: 0.9; --tk-h6-font-size-unit: rem;  --tk-h6-font-weight: 600;

    --tk-a-font-weight: 500;
    --tk-a-link-decoration:    none;
    --tk-a-hover-decoration:   underline;
    --tk-a-active-decoration:  underline;
    --tk-a-visited-decoration: none;
  }
}

/* =============================================================
 * Bridge — map the existing demo tokens.css names to the new
 * theme-settings vars, so any markup written against tokens.css
 * keeps working without a global rewrite.
 * Load order: tokens.css → theme-settings.css → components*.css
 * ============================================================= */
:root {
  /* Fallbacks (matching tokens.css) so an UNSET theme-setting never turns a token
     into the guaranteed-invalid value — without them, e.g. tk-btn-primary loses its
     background entirely when --tk-btn-bg-color isn't provided. */
  --color-bg:          var(--tk-theme-first-background-color, #ffffff);
  --color-bg-soft:     var(--tk-theme-secondary-background-color, #f7f7f8);
  --color-fg:          var(--tk-first-text-color, #0b1220);
  --color-fg-soft:     var(--tk-second-text-color, #6b7280);
  --color-primary:     var(--tk-btn-bg-color, #111827);
  --color-primary-fg:  var(--tk-btn-text-color, #ffffff);
  --color-primary-soft: color-mix(in srgb, var(--tk-btn-bg-color, #111827) 84%, #000);        /* primary hover = biraz koyu primary */
  --color-accent:      var(--tk-product-price-color, #ff5a1f);
  --color-accent-fg:   var(--tk-btn-text-color, #ffffff);                                     /* accent buton metni */
  --color-accent-soft: color-mix(in srgb, var(--tk-product-price-color, #ff5a1f) 84%, #000);  /* accent hover */
  --color-secondary:    var(--tk-btn-bg2-color, #1f2937);                                     /* ikinci buton rengi */
  --color-secondary-fg: var(--tk-btn-text-color, #ffffff);
}

/* =============================================================
 * Apply — minimal element rules so unstyled HTML (a, h1-h6, body)
 * picks up the variables. Themed components keep their own CSS.
 * ============================================================= */
body {
  font-family: var(--tk-body-font-family);
  font-size:   var(--tk-body-font-size-css);
  font-weight: var(--tk-body-font-weight);
  color:       var(--tk-body-font-color);
  line-height: var(--tk-body-line-height-css);
  background:  var(--tk-theme-first-background-color);
}

h1 { font-family: var(--tk-h1-font-family); font-weight: var(--tk-h1-font-weight); color: var(--tk-h1-font-color); background-color: var(--tk-h1-background-font-color); font-size: calc(var(--tk-h1-font-size) * 1rem); }
h2 { font-family: var(--tk-h2-font-family); font-weight: var(--tk-h2-font-weight); color: var(--tk-h2-font-color); background-color: var(--tk-h2-background-font-color); font-size: calc(var(--tk-h2-font-size) * 1rem); }
h3 { font-family: var(--tk-h3-font-family); font-weight: var(--tk-h3-font-weight); color: var(--tk-h3-font-color); background-color: var(--tk-h3-background-font-color); font-size: calc(var(--tk-h3-font-size) * 1rem); }
h4 { font-family: var(--tk-h4-font-family); font-weight: var(--tk-h4-font-weight); color: var(--tk-h4-font-color); background-color: var(--tk-h4-background-font-color); font-size: calc(var(--tk-h4-font-size) * 1rem); }
h5 { font-family: var(--tk-h5-font-family); font-weight: var(--tk-h5-font-weight); color: var(--tk-h5-font-color); background-color: var(--tk-h5-background-font-color); font-size: calc(var(--tk-h5-font-size) * 1rem); }
h6 { font-family: var(--tk-h6-font-family); font-weight: var(--tk-h6-font-weight); color: var(--tk-h6-font-color); background-color: var(--tk-h6-background-font-color); font-size: calc(var(--tk-h6-font-size) * 1rem); }

/* Exclude .tk-btn: these generic link rules are UNLAYERED and would otherwise override
   button background/color on <a class="tk-btn"> (e.g. the cart "Ödemeye Geç" link). */
a:not(.tk-btn)           { color: var(--tk-a-link-font-color);    background-color: var(--tk-a-link-background-font-color);    text-decoration: var(--tk-a-link-decoration);    font-weight: var(--tk-a-font-weight); }
a:not(.tk-btn):visited   { color: var(--tk-a-visited-font-color); background-color: var(--tk-a-visited-background-font-color); text-decoration: var(--tk-a-visited-decoration); }
a:not(.tk-btn):hover     { color: var(--tk-a-hover-font-color);   background-color: var(--tk-a-hover-background-font-color);   text-decoration: var(--tk-a-hover-decoration); }
a:not(.tk-btn):active    { color: var(--tk-a-active-font-color);  background-color: var(--tk-a-active-background-font-color);  text-decoration: var(--tk-a-active-decoration); }

/* Anchor-buttons (<a class="tk-btn-*">) must keep their BUTTON text colour even when a
   tenant's custom.css styles a:link/:hover/:visited (those are unlayered + specificity (0,1,1);
   these rules are (0,2,1) so they win). Background already handled by a:not(.tk-btn) above. */
a.tk-btn-primary:link, a.tk-btn-primary:visited, a.tk-btn-primary:hover, a.tk-btn-primary:active { color: var(--color-primary-fg); text-decoration: none; }
a.tk-btn-accent:link,  a.tk-btn-accent:visited,  a.tk-btn-accent:hover,  a.tk-btn-accent:active  { color: var(--color-accent-fg);  text-decoration: none; }
a.tk-btn-outline:link, a.tk-btn-outline:visited, a.tk-btn-outline:hover, a.tk-btn-outline:active,
a.tk-btn-ghost:link,   a.tk-btn-ghost:visited,   a.tk-btn-ghost:hover,   a.tk-btn-ghost:active   { color: var(--color-fg); text-decoration: none; }

.tk-container { max-width: var(--tk-template-max-width); }
/* Phones: a percentage template width (e.g. 90%) shrinks an already-narrow screen on top of
   --container-pad — double gutters. Full width; the pad alone keeps the breathing room. */
@media (max-width: 767px) { .tk-container { max-width: 100%; } }