/**
 * Design Tokens - ИК Море Section Library
 * Source: Slate template (slate.framer.website)
 *
 * Usage: import this file before any section CSS.
 * Override any token in a wrapping :root block to re-theme entire sections.
 */

:root {
  /* ─── Color palette ─────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:            #ffffff;
  --color-bg-subtle:     #f6f7f8;   /* light gray tint */
  --color-bg-muted:      #f3f7f6;   /* very slight green tint */
  --color-bg-dark:       #002e25;   /* deep forest green */
  --color-bg-dark-2:     #090c10;   /* near-black */

  /* Brand */
  --color-primary:       #002e25;   /* deep green - CTAs, headings on light */
  --color-accent:        #cdfa89;   /* lime green - highlight, primary buttons */
  --color-accent-light:  #e8fdc4;   /* pale lime - badge backgrounds, tags */
  --color-link:          #0099ff;   /* blue - hyperlinks */

  /* Text */
  --color-text:          #090c10;   /* near-black */
  --color-text-muted:    #3c4049;   /* dark gray */
  --color-text-subtle:   #585d69;   /* medium gray */
  --color-text-on-dark:  #ffffff;   /* white text on dark bg */

  /* Borders */
  --color-border:        #ebecef;   /* light border */
  --color-border-dark:   rgba(255, 255, 255, 0.08); /* border on dark bg */

  /* Semantic status colors */
  --color-success:       #18a957;   /* positive / up-trend / completed */
  --color-success-soft:  #e6f7ec;   /* success bg tint on light */
  --color-warning:       #f5b000;   /* rating star / caution / pending */
  --color-warning-soft:  #fef6e0;   /* warning bg tint on light */
  --color-error:         #e5484d;   /* negative / down-trend / destructive */
  --color-error-soft:    #fde8e9;   /* error bg tint on light */
  --color-info:          var(--color-link); /* alias for info accents */

  /* Decorative avatar palette — for placeholder avatars, user initials,
     colorful dots/tags. NOT meant for brand or status communication. */
  --avatar-1: linear-gradient(135deg, #f59e0b, #ef4444);   /* amber → red */
  --avatar-2: linear-gradient(135deg, #a855f7, #ec4899);   /* violet → pink */
  --avatar-3: linear-gradient(135deg, #0ea5e9, #6366f1);   /* sky → indigo */
  --avatar-4: linear-gradient(135deg, #22c55e, #14b8a6);   /* emerald → teal */
  --avatar-5: linear-gradient(135deg, #eab308, #84cc16);   /* yellow → lime */
  --avatar-6: linear-gradient(135deg, #f97316, #ec4899);   /* orange → pink */

  /* Browser chrome traffic-light colors (convention — use sparingly) */
  --color-chrome-close:    #ff6058;
  --color-chrome-minimize: #ffbd2e;
  --color-chrome-maximize: #27c93f;

  /* ─── Typography ─────────────────────────────────────────── */

  --font-body:     'Inter', 'Inter Placeholder', sans-serif;
  --font-heading:  'Archivo', sans-serif;
  --font-display:  'Inter Display', 'Inter', sans-serif;

  /* Font sizes (px) - matches Slate type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  48px;
  --text-6xl:  72px;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ─── Spacing (8px base scale) ──────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* Section vertical padding */
  --section-py:    96px;
  --section-py-sm: 64px;

  /* ─── Border radius ─────────────────────────────────────── */

  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 999px;

  /* ─── Shadows ───────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Brand-cast lift — shadow follows --color-primary so re-themes propagate.
     Use for card-hover states where the brand cool-cast is intentional. */
  --shadow-card-hover: 0 12px 28px color-mix(in srgb, var(--color-primary) 18%, transparent);

  /* ─── Layout ────────────────────────────────────────────── */

  --container-max:     1200px;
  --container-padding: var(--space-6);

  /* ─── Breakpoints (reference only - use in @media) ─────── */
  /* mobile:  max-width 809px                                  */
  /* tablet:  810px - 1199px                                   */
  /* desktop: min-width 1200px                                 */

  /* ─── Transitions ───────────────────────────────────────── */

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

  /* ─── Z-index scale ─────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
}