/* ==========================================================================
   RinkIQ — Colors & Type
   Single source of truth for RinkIQ brand tokens.
   Import this file at the top of any HTML / CSS that targets the brand.
   ========================================================================== */

/* ---------- Web fonts (Google Fonts) -------------------------------------
   Substituted on Google Fonts (no .ttf source files in the brand repo):
     - Inter             → Google Fonts (exact match)
     - Be Vietnam Pro    → Google Fonts (exact match — used for the wordmark)
     - JetBrains Mono    → Google Fonts (exact match)
   The wordmark in the SVG logo is already outlined, so Be Vietnam Pro is only
   needed when re-creating the wordmark in HTML (avoid; use the SVG instead).
   ------------------------------------------------------------------------- */
/* Fonts lokal eingebunden (statt Google-Fonts-@import) — die Datenschutzerklaerung
   der Landing (§5: keine externen Dienste, kein Drittland-Transfer) haengt daran.
   Variable Fonts, Latin-Subset; Be Vietnam Pro entfaellt (Wordmark nur als SVG). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  /* ============= COLORS ============= */

  /* Brand — primaries */
  --riq-ice-blue:        #0A84FF;   /* Primary brand · "Rink" wordmark · icon strokes */
  --riq-anchor-navy:     #0D1B2A;   /* "IQ" wordmark · headings · primary text */
  --riq-ice-white:       #E8F4FD;   /* Default background · light surfaces */
  --riq-puck-orange:     #FF9F0A;   /* Accent only — CTAs, badges, alerts. ≤5% */

  /* Brand — tints / shades (derived for hover, focus, surfaces) */
  --riq-ice-blue-700:    #0664C4;   /* Hover for primary buttons */
  --riq-ice-blue-800:    #054C95;   /* Pressed for primary buttons */
  --riq-ice-blue-100:    #D6EAFD;   /* Subtle blue surface (selected rows) */
  --riq-ice-blue-50:     #EEF6FE;   /* Faintest blue tint */
  --riq-puck-orange-700: #C77400;   /* Pressed orange */
  --riq-puck-orange-100: #FFF3DA;   /* Soft orange surface (badge bg) */

  /* Surfaces */
  --riq-bg:              #FFFFFF;   /* Default app background */
  --riq-bg-subtle:       #F0F8FE;   /* Subtle surfaces, inputs, table headers */
  --riq-bg-muted:        #E8F4FD;   /* Ice White — muted panels */
  --riq-bg-overlay:      rgba(13, 27, 42, 0.55); /* Modal scrim on light */
  --riq-bg-dark:         #0D1B2A;   /* Anchor Navy — dark surface */
  --riq-bg-dark-elev:    #142639;   /* Slightly raised dark surface */

  /* Borders */
  --riq-border:          #C5DFF0;   /* Default border / divider on light */
  --riq-border-strong:   #9EC2DD;   /* Stronger border (focused outlines) */
  --riq-border-subtle:   #DCEAF5;   /* Subtle, hairline divider */
  --riq-border-dark:     #2A3F55;   /* Border on dark surface */

  /* Text — on light */
  --riq-fg:              #0D1B2A;   /* Primary text */
  --riq-fg-secondary:    #5A7A9A;   /* Captions, muted text */
  --riq-fg-tertiary:     #8FA8BF;   /* Placeholder, meta info */
  --riq-fg-link:         #0A84FF;   /* Inline link text */

  /* Text — on dark */
  --riq-fg-on-dark:           #E8F4FD; /* Primary text on dark */
  --riq-fg-on-dark-secondary: #9DB6CC; /* Muted on dark */
  --riq-fg-on-dark-tertiary:  #5A7A9A; /* Subtle on dark */

  /* Semantic */
  --riq-success:         #1A6B3A;
  --riq-success-bg:      #E2F2E8;
  --riq-warning:         #B45300;
  --riq-warning-bg:      #FFF3E0;
  --riq-danger:          #A03030;
  --riq-danger-bg:       #FBE4E4;
  --riq-info:            #0A84FF;
  --riq-info-bg:         #EEF6FE;

  /* Focus ring */
  --riq-focus-ring:      0 0 0 3px rgba(10, 132, 255, 0.32);

  /* ============= TYPOGRAPHY ============= */

  /* Font families */
  --riq-font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --riq-font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --riq-font-wordmark:"Be Vietnam Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
  --riq-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Font sizes — product UI scale (rem-based, 1rem = 16px) */
  --riq-text-2xs:  11px;
  --riq-text-xs:   12px;
  --riq-text-sm:   13px;
  --riq-text-base: 14px;
  --riq-text-md:   15px;
  --riq-text-lg:   16px;
  --riq-text-xl:   18px;
  --riq-text-2xl:  20px;
  --riq-text-3xl:  24px;
  --riq-text-4xl:  28px;
  --riq-text-5xl:  32px;
  --riq-text-6xl:  40px;
  --riq-text-7xl:  48px;
  --riq-text-8xl:  64px;

  /* Line heights */
  --riq-lh-tight:   1.15;
  --riq-lh-snug:    1.3;
  --riq-lh-normal:  1.5;
  --riq-lh-relaxed: 1.65;

  /* Letter spacing */
  --riq-track-tight:  -0.02em;
  --riq-track-normal: 0;
  --riq-track-loose:  0.02em;
  --riq-track-caps:   0.06em;

  /* Weights */
  --riq-w-regular:  400;
  --riq-w-medium:   500;
  --riq-w-semibold: 600;
  --riq-w-bold:     700;

  /* ============= SPACING (4px grid) ============= */
  --riq-space-0:  0;
  --riq-space-1:  4px;
  --riq-space-2:  8px;
  --riq-space-3:  12px;
  --riq-space-4:  16px;
  --riq-space-5:  20px;
  --riq-space-6:  24px;
  --riq-space-8:  32px;
  --riq-space-10: 40px;
  --riq-space-12: 48px;
  --riq-space-16: 64px;
  --riq-space-20: 80px;

  /* ============= RADII ============= */
  --riq-radius-xs:   2px;
  --riq-radius-sm:   4px;
  --riq-radius-md:   6px;     /* Default control radius — buttons, inputs */
  --riq-radius-lg:   8px;     /* Cards, menus */
  --riq-radius-xl:   12px;    /* Large surfaces */
  --riq-radius-2xl:  16px;    /* Hero cards, modals */
  --riq-radius-full: 9999px;  /* Pills, avatars */

  /* ============= SHADOWS ============= */
  /* Cool, navy-tinted shadows — never pure black */
  --riq-shadow-xs: 0 1px 1px rgba(13, 27, 42, 0.04);
  --riq-shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06), 0 1px 1px rgba(13, 27, 42, 0.04);
  --riq-shadow-md: 0 4px 12px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.04);
  --riq-shadow-lg: 0 12px 28px rgba(13, 27, 42, 0.12), 0 2px 6px rgba(13, 27, 42, 0.05);
  --riq-shadow-xl: 0 24px 48px rgba(13, 27, 42, 0.16), 0 6px 14px rgba(13, 27, 42, 0.08);

  /* ============= MOTION ============= */
  --riq-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);     /* Standard ease */
  --riq-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* Decelerate */
  --riq-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);      /* Accelerate */
  --riq-dur-fast:    120ms;
  --riq-dur-base:    180ms;
  --riq-dur-slow:    260ms;
}

/* ============= SEMANTIC TYPE ROLES =============
   Use these classes (or copy their declarations) so type stays consistent
   across slides, mockups and product UI.
   =================================================================== */

.riq-display {
  font-family: var(--riq-font-display);
  font-weight: var(--riq-w-semibold);
  font-size: var(--riq-text-7xl);
  line-height: var(--riq-lh-tight);
  letter-spacing: var(--riq-track-tight);
  color: var(--riq-fg);
}

.riq-h1 {
  font-family: var(--riq-font-display);
  font-weight: var(--riq-w-semibold);
  font-size: var(--riq-text-5xl);
  line-height: var(--riq-lh-tight);
  letter-spacing: var(--riq-track-tight);
  color: var(--riq-fg);
}

.riq-h2 {
  font-family: var(--riq-font-display);
  font-weight: var(--riq-w-semibold);
  font-size: var(--riq-text-4xl);
  line-height: var(--riq-lh-snug);
  letter-spacing: var(--riq-track-tight);
  color: var(--riq-fg);
}

.riq-h3 {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-semibold);
  font-size: var(--riq-text-2xl);
  line-height: var(--riq-lh-snug);
  color: var(--riq-fg);
}

.riq-h4 {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-medium);
  font-size: var(--riq-text-xl);
  line-height: var(--riq-lh-snug);
  color: var(--riq-fg);
}

.riq-body {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-regular);
  font-size: var(--riq-text-base);
  line-height: var(--riq-lh-relaxed);
  color: var(--riq-fg);
}

.riq-body-lg {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-regular);
  font-size: var(--riq-text-lg);
  line-height: var(--riq-lh-relaxed);
  color: var(--riq-fg);
}

.riq-caption {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-medium);
  font-size: var(--riq-text-xs);
  line-height: var(--riq-lh-normal);
  color: var(--riq-fg-secondary);
}

.riq-eyebrow {
  font-family: var(--riq-font-sans);
  font-weight: var(--riq-w-semibold);
  font-size: var(--riq-text-2xs);
  line-height: var(--riq-lh-normal);
  letter-spacing: var(--riq-track-caps);
  text-transform: uppercase;
  color: var(--riq-fg-secondary);
}

.riq-mono {
  font-family: var(--riq-font-mono);
  font-weight: var(--riq-w-regular);
  font-size: var(--riq-text-sm);
  line-height: var(--riq-lh-normal);
  color: var(--riq-fg);
}

/* Inline kbd / code chip */
.riq-kbd {
  font-family: var(--riq-font-mono);
  font-size: var(--riq-text-xs);
  padding: 2px 6px;
  border-radius: var(--riq-radius-sm);
  background: var(--riq-bg-subtle);
  border: 1px solid var(--riq-border);
  color: var(--riq-fg);
}