/* Практични савети — design tokens
   Extracted verbatim from Prakticni Saveti Redesign.dc.html.
   Ship this file as-is; do not add values outside it. */

:root{
  /* ---- Surfaces & ink ---- */
  --ps-bg:        #FCFCFA; /* page background */
  --ps-surface:   #F4F2EA; /* chips, footer, sidebar boxes */
  --ps-surface-2: #FAF8F2; /* image + ad placeholders */
  --ps-ink:       #0E0E0D; /* headlines, 2px section rules */
  --ps-ink-body:  #26241F; /* long-form body copy */
  --ps-ink-2:     #3F3B34; /* chips, secondary links */
  --ps-ink-3:     #4A463F; /* deks, intros */
  --ps-muted:     #6E6A63; /* card deks */
  --ps-muted-2:   #8C877D; /* meta, dates, inactive tab */
  --ps-faint:     #A39C8F; /* captions, "Оглас" label */
  --ps-numeral:   #C9C3B7; /* most-read numerals, bullet dots */
  --ps-rule:      #E2E0D8; /* 1px borders */
  --ps-hairline:  #EDEBE3; /* list separators */
  --ps-dashed:    #D7D1C5; /* ad slot outline */

  /* ---- Accent (the only one) ---- */
  --ps-accent:    #1F6F5C;
  --ps-accent-hi: #17513F; /* link + CTA hover */
  --ps-selection: #CFE6DE;

  /* ---- Type families ---- */
  --ps-display: Bitter, Georgia, "Times New Roman", serif;   /* 600/700/800 */
  --ps-serif:   Literata, Georgia, serif;                    /* 400, 400i */
  --ps-sans:    "IBM Plex Sans", system-ui, sans-serif;       /* 400/500/600/700 */
  --ps-mono:    "IBM Plex Mono", ui-monospace, monospace;     /* 400 */

  /* ---- Type scale ---- */
  --ps-h1:            clamp(36px, 5.8vw, 64px); /* article + page H1 */
  --ps-h1-lh:         1.02;
  --ps-h1-ls:         -0.04em;
  --ps-featured:      clamp(34px, 5.4vw, 62px); /* homepage featured card */
  --ps-featured-lh:   1.03;
  --ps-featured-ls:   -0.038em;
  --ps-section:       clamp(24px, 3vw, 34px);   /* "Још савета" etc. */
  --ps-section-ls:    -0.035em;
  --ps-h2-article:    32px;
  --ps-h2-page:       28px;                     /* text-only pages */
  --ps-h2-lh:         1.12;
  --ps-h2-ls:         -0.035em;
  --ps-quote:         25px;
  --ps-card-lg:       20px;   /* grid cards */
  --ps-card-md:       19px;   /* related, saved */
  --ps-card-sm:       17px;   /* "Најновије" rail */
  --ps-card-ls:       -0.025em;
  --ps-body:          19px;   /* article body */
  --ps-body-page:     18px;   /* text-only page body */
  --ps-body-lh:       1.72;
  --ps-dek:           clamp(18px, 2vw, 21px);
  --ps-dek-lh:        1.55;
  --ps-ui:            13.5px;
  --ps-ui-sm:         12.5px;
  --ps-meta:          12px;   /* hard floor for reader-facing text */
  --ps-kicker:        11.5px;
  --ps-kicker-ls:     0.09em;
  --ps-label-ls:      0.1em;  /* uppercase section labels */
  --ps-caption:       11.5px; /* mono */

  /* ---- Structure ---- */
  --ps-radius-img:    4px;
  --ps-radius-card:   6px;
  --ps-radius-btn:    8px;
  --ps-border:        1px solid var(--ps-rule);
  --ps-rule-strong:   2px solid var(--ps-ink);  /* section divider */
  --ps-max:           1180px;
  --ps-gutter:        20px;
  --ps-measure:       720px;  /* article + page; option 600–860 */
  --ps-sidebar:       290px;
  --ps-grid-gap:      44px;   /* main ↔ sidebar */
  --ps-card-gap:      28px;
  --ps-sticky-top:    160px;  /* sidebar offset below sticky header */
  --ps-focus:         2px solid var(--ps-accent);
}

/* Image / ad placeholder fill used throughout the prototype.
   Replace with real media in production; keep the frame + reserved box. */
.ps-placeholder{
  background: repeating-linear-gradient(135deg,#EFEBE2 0 8px,var(--ps-surface-2) 8px 16px);
  border: var(--ps-border);
  border-radius: var(--ps-radius-img);
}

/* ---- Base ---- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ps-bg); color:var(--ps-ink);
  font-family:var(--ps-sans); text-wrap:pretty;
}
*{ box-sizing:border-box; }
a{ color:var(--ps-accent); text-decoration:none; }
a:hover{ color:var(--ps-accent-hi); text-decoration:underline; }
::selection{ background:var(--ps-selection); }
:focus-visible{ outline:var(--ps-focus); outline-offset:2px; }

/* ---- Image size names to register with add_image_size() ---- */
/* ps-featured 1600x900 · ps-card 800x600 · ps-thumb 176x176
   ps-square 1080x1080 · ps-inline 1200x800 */