/* ============================================================
   CityApp — Design Tokens
   ------------------------------------------------------------
   Theme-adaptive: inherits from host WordPress theme via
   --wp--preset--* custom properties, with sensible fallbacks.

   OFFICIAL PALETTE (from user-provided swatch, ilioupolinews.gr):
     #f19120 primary accent (orange, CTAs, links, highlights)
     #252525 dark neutral (body text, headings, dark bg)
     #f3efe0 warm off-white (surface, warm sections)
     #e0cba8 muted beige (secondary accent, dividers, tags)
     #eff1ed neutral off-white (page bg, subtle surfaces)

   NO reds, no pinks, no cool greens or blues.
   Semantic states (success/warning/danger) use tones of the
   primary palette (darker orange, dark gray, muted accent) —
   never introduce off-palette colors.

   Naming: --odigos-{category}-{role}-{scale?}
   ============================================================ */

/* --------------------------------------------------------
   AVERTA STD — brand font
   User-provided .otf files, self-hosted under fonts/.
   -------------------------------------------------------- */
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Averta Std";
  src: url("../fonts/AvertaStd-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     BRAND PALETTE — the 5 official colors, nothing else
     -------------------------------------------------------- */
  --odigos-brand-orange:  #f19120;
  --odigos-brand-ink:     #252525;
  --odigos-brand-cream:   #f3efe0;
  --odigos-brand-beige:   #e0cba8;
  --odigos-brand-mist:    #eff1ed;

  /* --------------------------------------------------------
     ROLE TOKENS
     Read from WP theme first, fall back to brand palette.
     -------------------------------------------------------- */
  --odigos-color-primary:    var(--wp--preset--color--primary,  var(--odigos-brand-orange));
  --odigos-color-accent:     var(--wp--preset--color--accent,   var(--odigos-brand-beige));
  --odigos-color-surface:    var(--wp--preset--color--base,     #ffffff);
  --odigos-color-surface-alt: var(--odigos-brand-mist);
  --odigos-color-surface-warm: var(--odigos-brand-cream);
  --odigos-color-text:       var(--wp--preset--color--contrast, var(--odigos-brand-ink));
  --odigos-color-heading:    var(--wp--preset--color--contrast, var(--odigos-brand-ink));

  /* Derived neutrals via color-mix — keeps everything on-palette */
  --odigos-color-muted:      color-mix(in oklch, var(--odigos-brand-ink) 55%, transparent);
  --odigos-color-subtle:     color-mix(in oklch, var(--odigos-brand-ink) 32%, transparent);
  --odigos-color-hairline:   color-mix(in oklch, var(--odigos-brand-ink) 12%, transparent);
  --odigos-color-whisper:    color-mix(in oklch, var(--odigos-brand-ink) 5%,  transparent);
  --odigos-color-surface-2:  color-mix(in oklch, var(--odigos-brand-ink) 3%,  var(--odigos-brand-mist));
  --odigos-color-surface-3:  color-mix(in oklch, var(--odigos-brand-ink) 6%,  var(--odigos-brand-mist));

  /* Orange scale */
  --odigos-color-primary-hover: color-mix(in oklch, var(--odigos-brand-orange) 88%, var(--odigos-brand-ink));
  --odigos-color-primary-soft:  color-mix(in oklch, var(--odigos-brand-orange) 12%, var(--odigos-brand-mist));
  --odigos-color-primary-tint:  color-mix(in oklch, var(--odigos-brand-orange) 22%, var(--odigos-brand-cream));

  /* Beige scale */
  --odigos-color-accent-soft:   color-mix(in oklch, var(--odigos-brand-beige) 35%, var(--odigos-brand-mist));
  --odigos-color-accent-hover:  color-mix(in oklch, var(--odigos-brand-beige) 80%, var(--odigos-brand-ink));

  /* --------------------------------------------------------
     SEMANTIC TOKENS — mapped ONLY to brand colors.
     Success  = darker orange (positive action, still on-palette)
     Warning  = warm beige (informational, muted)
     Danger   = deep ink (serious, no red)
     Info     = ink 65% (neutral)
     -------------------------------------------------------- */
  --odigos-color-success:  var(--odigos-brand-orange);
  --odigos-color-warning:  var(--odigos-brand-beige);
  --odigos-color-danger:   var(--odigos-brand-ink);
  --odigos-color-info:     color-mix(in oklch, var(--odigos-brand-ink) 70%, transparent);

  --odigos-color-success-soft: color-mix(in oklch, var(--odigos-brand-orange) 15%, var(--odigos-brand-mist));
  --odigos-color-warning-soft: color-mix(in oklch, var(--odigos-brand-beige)  40%, var(--odigos-brand-mist));
  --odigos-color-danger-soft:  color-mix(in oklch, var(--odigos-brand-ink)    10%, var(--odigos-brand-mist));

  /* Tier accents (subtle, applied as border/badge only) */
  --odigos-tier-free-ink:      var(--odigos-color-muted);
  --odigos-tier-premium-ink:   var(--odigos-brand-ink);
  --odigos-tier-platinum-ink:  var(--odigos-brand-orange);

  /* --------------------------------------------------------
     TYPOGRAPHY — Averta Std everywhere
     Body & Display share the same family; weight & size do the work.
     Falls back to host theme first if theme provides one.
     -------------------------------------------------------- */
  --odigos-font-display: var(--wp--preset--font-family--heading,
    "Averta Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --odigos-font-body: var(--wp--preset--font-family--body,
    "Averta Std", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --odigos-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --odigos-text-2xs:  clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);   /* 11–12 */
  --odigos-text-xs:   clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem); /* 12–13 */
  --odigos-text-sm:   clamp(0.8125rem, 0.79rem + 0.2vw,  0.875rem);  /* 13–14 */
  --odigos-text-base: clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);      /* 15–16 */
  --odigos-text-md:   clamp(1rem,      0.97rem + 0.25vw, 1.0625rem); /* 16–17 */
  --odigos-text-lg:   clamp(1.125rem,  1.08rem + 0.4vw,  1.25rem);   /* 18–20 */
  --odigos-text-xl:   clamp(1.375rem,  1.28rem + 0.6vw,  1.625rem);  /* 22–26 */
  --odigos-text-2xl:  clamp(1.75rem,   1.55rem + 1.2vw,  2.25rem);   /* 28–36 */
  --odigos-text-3xl:  clamp(2.25rem,   1.9rem  + 2vw,    3rem);      /* 36–48 */
  --odigos-text-4xl:  clamp(2.75rem,   2.2rem  + 3vw,    4rem);      /* 44–64 */
  --odigos-text-5xl:  clamp(3.5rem,    2.6rem  + 4.5vw,  5.5rem);    /* 56–88 */

  /* Line-heights */
  --odigos-leading-tight:   1.1;
  --odigos-leading-snug:    1.25;
  --odigos-leading-normal:  1.5;
  --odigos-leading-relaxed: 1.65;
  --odigos-leading-loose:   1.8;

  /* Letter spacing */
  --odigos-tracking-tighter: -0.03em;
  --odigos-tracking-tight:   -0.015em;
  --odigos-tracking-normal:  0;
  --odigos-tracking-wide:    0.02em;
  --odigos-tracking-wider:   0.08em;
  --odigos-tracking-widest:  0.14em;

  /* Weights — Averta ships Light 300 / Regular 400 / Bold 700 */
  --odigos-weight-light:    300;
  --odigos-weight-regular:  400;
  --odigos-weight-medium:   400;
  --odigos-weight-semibold: 700;
  --odigos-weight-bold:     700;

  /* --------------------------------------------------------
     SPACING (4px base, tuned scale)
     -------------------------------------------------------- */
  --odigos-space-0:   0;
  --odigos-space-1:   0.25rem;
  --odigos-space-2:   0.5rem;
  --odigos-space-3:   0.75rem;
  --odigos-space-4:   1rem;
  --odigos-space-5:   1.25rem;
  --odigos-space-6:   1.5rem;
  --odigos-space-8:   2rem;
  --odigos-space-10:  2.5rem;
  --odigos-space-12:  3rem;
  --odigos-space-16:  4rem;
  --odigos-space-20:  5rem;
  --odigos-space-24:  6rem;
  --odigos-space-32:  8rem;

  /* --------------------------------------------------------
     RADIUS
     -------------------------------------------------------- */
  --odigos-radius-none: 0;
  --odigos-radius-xs:   2px;
  --odigos-radius-sm:   4px;
  --odigos-radius-md:   8px;
  --odigos-radius-lg:   12px;
  --odigos-radius-xl:   16px;
  --odigos-radius-2xl:  24px;
  --odigos-radius-full: 999px;

  /* --------------------------------------------------------
     SHADOWS — soft, top-left light source, restrained
     -------------------------------------------------------- */
  --odigos-shadow-xs: 0 1px 2px rgb(15 15 15 / 0.04);
  --odigos-shadow-sm: 0 1px 3px rgb(15 15 15 / 0.05), 0 1px 2px rgb(15 15 15 / 0.03);
  --odigos-shadow-md: 0 4px 12px -2px rgb(15 15 15 / 0.06), 0 2px 4px rgb(15 15 15 / 0.04);
  --odigos-shadow-lg: 0 12px 32px -6px rgb(15 15 15 / 0.10), 0 4px 8px rgb(15 15 15 / 0.04);
  --odigos-shadow-xl: 0 24px 48px -12px rgb(15 15 15 / 0.16), 0 8px 16px rgb(15 15 15 / 0.06);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --odigos-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --odigos-ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --odigos-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --odigos-spring:       linear(0, 0.4 8%, 0.8 18%, 1.02 30%, 1 45%, 1);

  --odigos-duration-instant: 100ms;
  --odigos-duration-fast:    160ms;
  --odigos-duration-base:    220ms;
  --odigos-duration-slow:    360ms;
  --odigos-duration-slower:  520ms;

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */
  --odigos-container-narrow: 720px;
  --odigos-container-base:   1120px;
  --odigos-container-wide:   1360px;
  --odigos-container-pad:    clamp(1rem, 4vw, 2.5rem);

  /* Focus ring — uses primary orange at 40% opacity */
  --odigos-focus-ring: 0 0 0 3px color-mix(in oklch, var(--odigos-brand-orange) 40%, transparent);

  /* Z-index scale */
  --odigos-z-base:    1;
  --odigos-z-raised:  10;
  --odigos-z-sticky:  100;
  --odigos-z-overlay: 500;
  --odigos-z-modal:   1000;
  --odigos-z-toast:   2000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --odigos-duration-instant: 1ms;
    --odigos-duration-fast:    1ms;
    --odigos-duration-base:    1ms;
    --odigos-duration-slow:    1ms;
    --odigos-duration-slower:  1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}