/* ============================================================
   TOKENS: the second of the two files you edit for a new site.
   Change colours and fonts here. main.css only reads these.
   Values follow the porntourist.com layout spec.
   ============================================================ */

:root {
  /* Brand */
  --brand: #ff6464;            /* main accent: hover colour, links, primary buttons */
  --brand-hover: #e45757;
  --brand-ink: #ffffff;        /* text on top of --brand */
  --brand-2: #2bc96a;          /* green: NEW tags, go buttons */
  --brand-3: #ffbc64;          /* yellow: secondary buttons */

  /* Island palette: each category picks one (c1 .. c10). Solid header + pill. */
  --c1: #ff6464;  --c1-ink: #fff;
  --c2: #ffbc64;  --c2-ink: #fff;
  --c3: #64d9ff;  --c3-ink: #fff;
  --c4: #649fff;  --c4-ink: #fff;
  --c5: #ff9c64;  --c5-ink: #fff;
  --c6: #d764ff;  --c6-ink: #fff;
  --c7: #2bc96a;  --c7-ink: #fff;
  --c8: #ff64b4;  --c8-ink: #fff;
  --c9: #8fa0b5;  --c9-ink: #fff;
  --c10: #ffd264; --c10-ink: #fff;

  /* Type */
  --font: Verdana, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-display: var(--font);
  --fs-base: 16px;
  --lh: 1.5;

  /* Shape and spacing */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 25px;
  --gutter: 20px;
  --maxw: 1386px;
  --header-h: 98px;
  --band-heading: #ffd27a;      /* headings on the home text band, both modes */
  --text-heading: #ffb04d;      /* section headings in long text, dark mode */
  --logo-w: 230px;
  --logo-h: 105px;
  --logo-x: 18px;   /* mascot art: clear the rounded end of the header bar */
  --logo-y: -5px;  /* mascot art: flat bottom sits on the bar edge, head pops out the top */

  /* Dark surfaces (default) */
  --bg: #282f3d;
  --bg-2: #1c2533;             /* header, footer, cards */
  --surface: #1c2533;          /* card box */
  --surface-2: #272f3d;        /* nav buttons, hover rows */
  --border: #383e4a;
  --border-strong: #484a4c;
  --text: #f4f4fb;
  --text-2: #b1b6bd;
  --text-3: #838383;
  --heading: #ffffff;
  --link: #ffffff;
  --ok: #2bc96a;
  --bad: #ff6464;
  --shadow: 0 4px 8px rgba(42, 47, 57, .05);
  --pattern: url("/brand/bg-dark.svg");   /* 320px tile, swap per site */
  /* SEO text band and footer band (PornDude uses blue + orange; ours: slate + coral) */
  --seo-bg: #2f3a52;  --seo-text: #f4f4fb;
  --ftr-bg: #1f4e5f;  --ftr-text: #e6f0f3;   /* deep teal, easy on the eyes */
}

[data-theme="light"] {
  --text-heading: #c2570c;      /* section headings in long text, light mode */
  --bg: #e8ebf1;               /* toned down, not white */
  --bg-2: #1c2533;             /* header and footer stay dark, like the reference */
  --surface: #f6f7fa;
  --surface-2: #272f3d;
  --border: #d9dde6;
  --border-strong: #d6d6de;
  --text: #2e242d;
  --text-2: #5b5b66;
  --text-3: #838383;
  --heading: #2e242d;
  --link: #2e242d;
  --shadow: 0 4px 8px rgba(42, 47, 57, .05);
  --pattern: url("/brand/bg-light.svg");
  --header-shadow: 0 4px 14px -8px rgba(30, 40, 60, .18);   /* soft, light mode only */
  --seo-bg: #4a6fa5;  --seo-text: #ffffff;
  --ftr-bg: #1f4e5f;  --ftr-text: #e6f0f3;   /* deep teal, easy on the eyes */
}

/* Phones: slimmer bar, logo sits on its bottom edge and the head pops out the top, same as desktop. */
@media (max-width: 560px) {
  :root { --header-h: 84px; --logo-w: 185px; --logo-h: 85px; --logo-x: 4px; --logo-y: -4px; }
}