/*
Theme Name: Bureau Toimitilat
Theme URI: https://www.bref.fi
Author: Bureau Real Estate Finland Oy
Description: Räätälöity hakukoneoptimoitu teema toimitilavälitysyrityksen verkkosivuille. Sisältää valmiit pohjat etusivulle, vapaiden toimitilojen hakuun (paginoituna), kohdesivulle, blogille, palveluille, referensseille ja meistä-sivulle.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bureau
Tags: business, blog, seo, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

/* =====================================================================
   BUREAU DESIGN SYSTEM — design tokens
   ---------------------------------------------------------------------
   Kaikki värit, välistykset, typografia ja efektit yhden lähteen takaa.
   Komponenttitasoiset tyylit asuvat assets/css/main.css -tiedostossa,
   joka kuluttaa näitä muuttujia. Kun haluat muuttaa brändin ilmettä,
   muokkaa tätä tiedostoa.
   ===================================================================== */
:root {
  /* -------- Neutraalit (lämpimät, ei "sairaalavalkoiset") -------- */
  --color-bg:        #FBFAF7; /* sivun perustausta (creamy off-white) */
  --color-surface:   #FFFFFF; /* kortit, hakupalkki, lomakkeet */
  --color-surface-2: #F4F2ED; /* alternate section, upotetut laatikot */
  --color-surface-3: #EAE7DF; /* hover / divider */

  --color-ink:       #1A1B1E; /* pääotsikot */
  --color-ink-2:     #2D2E32; /* leipäteksti */
  --color-ink-3:     #5B5C62; /* tertiäärinen teksti */
  --color-muted:     #8B8C92; /* placeholderit, metat */
  --color-faint:     #B5B6BB; /* micro-labels, disabled */
  --color-line:      #E5E2D9; /* kortit, kevyet rajat */
  --color-line-soft: #F1EEE6; /* sectionien jakajat */

  /* -------- Tumma (hero, footer, nav) -------- */
  --color-dark:      #111314; /* deep near-black, sininen sävy */
  --color-dark-2:    #1C1F22; /* hero-gradient light end */
  --color-dark-3:    #0B0C0D; /* footer */

  /* -------- Aksentti: kiinteistöalan metsänvihreä -------- */
  --color-accent:       #0F5E47; /* primary accent — napit, linkit, badget */
  --color-accent-ink:   #063B2B; /* tumma varianti text-on-accent */
  --color-accent-soft:  #E4EEE9; /* pale background */
  --color-accent-hover: #0B4D3A;

  /* -------- Status -------- */
  --color-success-bg:  #E3EFE8;
  --color-success-ink: #0E5A3F;
  --color-warn-bg:     #FBEFDC;
  --color-warn-ink:    #6A3D0B;
  --color-danger-bg:   #FBE2DF;
  --color-danger-ink:  #8A2A20;

  /* -------- Radius (pehmeä moderni) -------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* -------- Varjot (luonnollisia, ei laatikoita) -------- */
  --shadow-xs:   0 1px 2px rgba(17,19,20,0.04);
  --shadow-sm:   0 2px 6px rgba(17,19,20,0.05), 0 1px 2px rgba(17,19,20,0.04);
  --shadow-md:   0 10px 24px -10px rgba(17,19,20,0.12), 0 2px 4px rgba(17,19,20,0.04);
  --shadow-lg:   0 20px 40px -20px rgba(17,19,20,0.18), 0 4px 8px rgba(17,19,20,0.05);
  --shadow-focus: 0 0 0 3px rgba(15,94,71,0.22);

  /* -------- Typografia -------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Tyypografinen skaala (rem-pohjainen perusta 16px). Käytetty
     komponenteissa clamp()-yksiköinä silmäsääntöinä. */
  --fs-display: clamp(2.5rem, 4.2vw + 0.5rem, 4.25rem); /* 40 → 68 */
  --fs-h1:      clamp(2rem,   2.6vw + 0.8rem, 3rem);    /* 32 → 48 */
  --fs-h2:      clamp(1.5rem, 1.4vw + 0.8rem, 2.25rem); /* 24 → 36 */
  --fs-h3:      clamp(1.25rem, 0.8vw + 0.8rem, 1.5rem); /* 20 → 24 */
  --fs-lg:      1.125rem; /* 18 */
  --fs-md:      1rem;     /* 16 — body */
  --fs-sm:      0.9375rem;/* 15 */
  --fs-xs:      0.8125rem;/* 13 */
  --fs-2xs:     0.75rem;  /* 12 — pieni eyebrow */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.16em;

  /* -------- Spacing / rhythm -------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 112px;

  /* -------- Layout -------- */
  --container: 1440px;
  --container-narrow: 820px; /* leipätekstin luettava leveys */
  --container-wide:   1320px; /* media-text / kuva-teksti-blokit */
  --gutter: max(32px, calc((100% - var(--container)) / 2));
  --header-h: 72px;

  /* -------- Transitions -------- */
  --easing: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 320ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: var(--color-bg);
  color: var(--color-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh-normal);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--t-fast) var(--easing); }
a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; cursor: pointer; }

/* Yhtenäinen focus-rengas kaikille interaktioille. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--color-accent-soft); color: var(--color-accent-ink); }