/*
 * VENDORED — Impro Silesia Design System tokens.
 *
 * Source: Claude Design project "Impro Silesia Design System" (colors_and_type.css).
 * Do not edit by hand. When a new design system export lands, replace this file
 * wholesale; everything the theme adds on top lives in theme.css.
 *
 * Two deliberate changes from the source, both explained in docs/design-system.md:
 *   1. The Google Fonts @import is removed. Asap is self-hosted in fonts.css,
 *      which the design system itself recommends for production.
 *   2. Nothing else. Contrast corrections are NOT made here -- they are layered
 *      as separate text roles in theme.css so this file stays a faithful copy.
 */

/* =========================================================================
   Impro Silesia — Design System tokens
   --------------------------------------------------------------------------
   Three sibling brands share one foundation (Asap, 4px grid, radius 3/6/10):

     [data-brand="is"]        Impro Silesia main — orange #f39000 on white.
                              Used for improsilesia.pl + internal apps.

     [data-brand="wis-light"] Wieczór Impro Silesia (WIS) light — same
                              orange-leaning palette on white. For the WIS
                              site + print collateral.

     [data-brand="wis-dark"]  Wieczór Impro Silesia dark — orange on near-
                              black with paint splashes and grunge texture.
                              For event posters, social, stage atmosphere.

   :root holds the IS defaults; the [data-brand] selectors override the deltas
   only. Most spacing, radius, type and motion vars are shared.
   ========================================================================= */


:root {
  /* =========================================================================
     COLOR — Impro Silesia defaults
     ========================================================================= */
  /* Brand orange — extracted, 423 occurrences on improsilesia.pl */
  --color-primary:        #f39000;
  --color-primary-hover:  #d97e00;   /* ~10% darker — curated */
  --color-primary-light:  #ffb84d;   /* tint for soft backgrounds — curated */
  --color-primary-ink:    #ffffff;   /* ink that sits on --color-primary */

  /* Surfaces & ink */
  --color-bg:             #ffffff;
  --color-bg-subtle:      #f7f7f7;
  --color-surface:        #ffffff;
  --color-surface-alt:    #fafafa;

  --color-fg:             #000000;   /* primary ink */
  --color-fg-strong:      #000000;
  --color-fg-muted:       #828282;   /* extracted, 44 uses */
  --color-fg-subtle:      #cccccc;
  --color-fg-inverse:     #ffffff;

  /* Borders */
  --color-border:         #e5e5e5;
  --color-border-strong:  #cccccc;
  --color-border-accent:  var(--color-primary);

  /* States */
  --color-focus-ring:     rgba(243, 144, 0, 0.4);
  --color-overlay:        rgba(0, 0, 0, 0.424);  /* extracted */
  --color-overlay-light:  rgba(0, 0, 0, 0.16);

  /* Semantic */
  --color-success:        #4caf50;
  --color-warning:        #f39000;   /* same as primary by design */
  --color-error:          #fa3e3e;   /* from --rpi-fb-color */
  --color-info:           #3c4248;

  /* Stage palette — used in WIS dark; defined here so anything can reach for it */
  --color-stage-black:    #0a0a0a;
  --color-stage-deep:     #141414;
  --color-stage-smoke:    #1f1f1f;
  --color-stage-ash:      #2a2a2a;
  --color-stage-fog:      #4a4a4a;
  --color-wis-orange:     #eb6f09;   /* punchier than IS orange for posters */
  --color-wis-orange-hot: #ff7a14;

  /* =========================================================================
     TYPE — shared across all three brands
     ========================================================================= */
  --font-display:  'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, 'Cascadia Mono', monospace;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Scale rooted in IS real-world sizes (28/32/37/45px = 2xl→5xl) */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-lg:    1.125rem;  /* 18 */
  --fs-xl:    1.375rem;  /* 22 */
  --fs-2xl:   1.75rem;   /* 28 — H1 mobile */
  --fs-3xl:   2rem;      /* 32 */
  --fs-4xl:   2.3125rem; /* 37 */
  --fs-5xl:   2.8125rem; /* 45 — H1 desktop */
  --fs-6xl:   4rem;      /* 64 — poster scale (WIS) */
  --fs-7xl:   6rem;      /* 96 — stage scale (WIS dark) */

  --lh-tight:    1.0;   /* IS uses 1.0 for headings */
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.06em;

  /* =========================================================================
     SPACING — 4px base, shared
     ========================================================================= */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* =========================================================================
     RADIUS — 3/6/10 are the canonical IS values
     ========================================================================= */
  --radius-sm:   3px;    /* buttons, inputs (extracted) */
  --radius-md:   6px;
  --radius-lg:   10px;   /* cards, large containers (extracted) */
  --radius-xl:   15px;   /* hero buttons, big tiles (extracted) */
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* =========================================================================
     SHADOWS
     - The "modern" scale (sm→xl) is the daily driver.
     - The "is-soft / is-strong" legacy pair recreates the look of the live
       improsilesia.pl when you want that retro Elementor feel.
     ========================================================================= */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* Legacy — 1:1 with improsilesia.pl */
  --shadow-is-soft:   3px 3px 10px rgba(0, 0, 0, 0.09);
  --shadow-is-strong: 3px 3px 10px rgba(0, 0, 0, 0.5);

  /* =========================================================================
     MOTION
     ========================================================================= */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;

  /* =========================================================================
     LAYOUT
     ========================================================================= */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1218px;   /* IS uses 1218 — matches breakpoints */
  --container-2xl: 1440px;

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1218px;
  --bp-2xl: 1440px;

  /* =========================================================================
     Z-INDEX
     ========================================================================= */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* =========================================================================
   Brand variants — override the deltas only.
   ========================================================================= */

/* Wieczór Impro Silesia (light) — site + print collateral.
   Punchier orange than IS; everything else identical. */
[data-brand="wis-light"] {
  --color-primary:       #eb6f09;
  --color-primary-hover: #c95c00;
  --color-primary-light: #ffaa55;
  --color-focus-ring:    rgba(235, 111, 9, 0.4);
}

/* Wieczór Impro Silesia (dark) — event posters, social, stage atmosphere.
   Inverts the surface palette and leans on splashes + grunge for energy. */
[data-brand="wis-dark"] {
  --color-primary:       #eb6f09;
  --color-primary-hover: #ff7a14;
  --color-primary-light: #ffaa55;
  --color-primary-ink:   #0a0a0a;
  --color-focus-ring:    rgba(255, 122, 20, 0.5);

  --color-bg:            #0a0a0a;
  --color-bg-subtle:     #141414;
  --color-surface:       #141414;
  --color-surface-alt:   #1f1f1f;

  --color-fg:            #ffffff;
  --color-fg-strong:     #ffffff;
  --color-fg-muted:      #9a9a9a;
  --color-fg-subtle:     #4a4a4a;
  --color-fg-inverse:    #0a0a0a;

  --color-border:        #2a2a2a;
  --color-border-strong: #4a4a4a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   --------------------------------------------------------------------------
   Use these instead of raw token vars when you want a consistent specimen.
   ========================================================================= */

.t-display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-strong);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--color-fg-strong);
  margin: 0;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--color-fg-strong);
  margin: 0;
}

.t-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-fg-strong);
  margin: 0;
}

.t-h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-fg-strong);
  margin: 0;
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.t-body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

.t-caption, small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

.t-button {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.t-mono, code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Stage scale — only for WIS-dark posters / event hero */
.t-stage {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(3rem, 8vw, var(--fs-7xl));
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}