/* ==========================================================================
   SPDLAB.hu — tokens.css
   Design tokens expressed as CSS custom properties.
   Single source of truth for the entire design system.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     COLOR SYSTEM
     -------------------------------------------------------------------------- */

  /* Backgrounds */
  --color-bg:              #0a0a0a;   /* Page background — near black */
  --color-bg-subtle:       #111111;   /* Slightly lifted bg, alt sections */
  --color-surface:         #161616;   /* Card / panel surface */
  --color-surface-raised:  #1e1e1e;   /* Elevated card, modal, dropdown */

  /* Borders */
  --color-border:          #2a2a2a;   /* Default border */
  --color-border-subtle:   #1f1f1f;   /* Hairline / separator */

  /* Text */
  --color-text-primary:    #f0f0f0;   /* Primary body / heading text */
  --color-text-secondary:  #888888;   /* Muted / supporting text */
  --color-text-tertiary:   #555555;   /* Disabled / placeholder text */
  --color-text-inverse:    #0a0a0a;   /* Text on accent backgrounds */

  /* Accent — Muted Cyan/Teal */
  --color-accent:          #00d4aa;
  --color-accent-dim:      #00d4aa22; /* Transparent tint for bg highlights */
  --color-accent-hover:    #00e6bb;   /* Lighter on hover */
  --color-accent-muted:    #00d4aa66; /* Mid-opacity for decorative use */

  /* Neutrals */
  --color-graphite:        #3a3a3a;
  --color-white:           #ffffff;

  /* Semantic overlays */
  --color-overlay:         rgba(0, 0, 0, 0.6);
  --color-scrim:           rgba(10, 10, 10, 0.85);

  /* Gradient tokens */
  --gradient-hero:         radial-gradient(ellipse 80% 60% at 50% -10%, #00d4aa18 0%, transparent 70%);
  --gradient-accent-glow:  radial-gradient(circle 300px at var(--mouse-x, 50%) var(--mouse-y, 50%), #00d4aa12 0%, transparent 70%);
  --gradient-card:         linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
  --gradient-section-fade: linear-gradient(180deg, transparent 0%, #0a0a0a 100%);
  --gradient-border:       linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
  --gradient-text-accent:  linear-gradient(90deg, #00d4aa 0%, #00e6bb 50%, #00c49a 100%);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY SYSTEM
     -------------------------------------------------------------------------- */

  /* Font families */
  --font-sans:       'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                     ui-monospace, 'SF Mono', Consolas, monospace;

  /* Font weights */
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;

  /* Modular type scale — base 16px, ratio ~1.25 (Major Third) */
  --text-xs:         0.75rem;   /*  12px */
  --text-sm:         0.875rem;  /*  14px */
  --text-base:       1rem;      /*  16px */
  --text-md:         1.125rem;  /*  18px */
  --text-lg:         1.25rem;   /*  20px */
  --text-xl:         1.5rem;    /*  24px */
  --text-2xl:        1.875rem;  /*  30px */
  --text-3xl:        2.25rem;   /*  36px */
  --text-4xl:        3rem;      /*  48px */
  --text-5xl:        3.75rem;   /*  60px */
  --text-6xl:        4.5rem;    /*  72px */

  /* Line heights */
  --lh-tight:        1.1;
  --lh-snug:         1.25;
  --lh-normal:       1.5;
  --lh-relaxed:      1.625;
  --lh-loose:        2;

  /* Letter spacing */
  --ls-tightest:     -0.04em;
  --ls-tighter:      -0.03em;
  --ls-tight:        -0.02em;
  --ls-normal:        0em;
  --ls-wide:          0.025em;
  --ls-wider:         0.05em;
  --ls-widest:        0.1em;

  /* --------------------------------------------------------------------------
     SPACING SYSTEM — Base-8 grid
     -------------------------------------------------------------------------- */

  --space-1:    4px;    /* 0.5 × 8 */
  --space-2:    8px;    /* 1 × 8   */
  --space-3:    12px;   /* 1.5 × 8 */
  --space-4:    16px;   /* 2 × 8   */
  --space-5:    20px;   /* 2.5 × 8 */
  --space-6:    24px;   /* 3 × 8   */
  --space-8:    32px;   /* 4 × 8   */
  --space-10:   40px;   /* 5 × 8   */
  --space-12:   48px;   /* 6 × 8   */
  --space-16:   64px;   /* 8 × 8   */
  --space-20:   80px;   /* 10 × 8  */
  --space-24:   96px;   /* 12 × 8  */
  --space-32:   128px;  /* 16 × 8  */
  --space-40:   160px;  /* 20 × 8  */

  /* Section padding shorthand aliases */
  --section-gap-sm:   var(--space-12);  /* 48px  — tight sections */
  --section-gap:      var(--space-20);  /* 80px  — default */
  --section-gap-lg:   var(--space-32);  /* 128px — generous */

  /* --------------------------------------------------------------------------
     BORDER SYSTEM
     -------------------------------------------------------------------------- */

  --border-width:    1px;
  --border-style:    solid;
  --border-default:  1px solid var(--color-border);
  --border-subtle:   1px solid var(--color-border-subtle);
  --border-accent:   1px solid var(--color-accent-muted);

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* --------------------------------------------------------------------------
     SHADOWS & GLOWS
     -------------------------------------------------------------------------- */

  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:          0 16px 64px rgba(0, 0, 0, 0.6);

  --shadow-accent-sm:   0 0 12px rgba(0, 212, 170, 0.15);
  --shadow-accent-md:   0 0 24px rgba(0, 212, 170, 0.2);
  --shadow-accent-lg:   0 0 48px rgba(0, 212, 170, 0.25);

  --shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* --------------------------------------------------------------------------
     TRANSITIONS & EASING
     -------------------------------------------------------------------------- */

  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:     120ms;
  --duration-normal:   220ms;
  --duration-slow:     380ms;
  --duration-slower:   600ms;

  --transition-color:     color var(--duration-normal) var(--ease-out-quart),
                          background-color var(--duration-normal) var(--ease-out-quart),
                          border-color var(--duration-normal) var(--ease-out-quart),
                          opacity var(--duration-normal) var(--ease-out-quart);

  --transition-transform: transform var(--duration-normal) var(--ease-out-quart);

  --transition-all:       all var(--duration-normal) var(--ease-out-quart);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-out-quart);

  /* --------------------------------------------------------------------------
     Z-INDEX LAYERS
     -------------------------------------------------------------------------- */

  --z-below:     -1;
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */

  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --container-padding-x:  var(--space-6);    /* 24px mobile */
  --container-padding-x-md: var(--space-8);  /* 32px tablet */
  --container-padding-x-lg: var(--space-12); /* 48px desktop */

  /* Nav height — used for scroll offset calculations */
  --nav-height:    64px;
  --nav-height-md: 72px;

  /* --------------------------------------------------------------------------
     COMPONENT TOKENS
     -------------------------------------------------------------------------- */

  /* Buttons */
  --btn-height-sm:     36px;
  --btn-height-md:     44px;
  --btn-height-lg:     52px;
  --btn-padding-x-sm:  var(--space-4);
  --btn-padding-x-md:  var(--space-6);
  --btn-padding-x-lg:  var(--space-8);

  /* Cards */
  --card-padding:        var(--space-6);
  --card-padding-lg:     var(--space-8);
  --card-radius:         var(--radius-xl);
  --card-border:         var(--border-default);

  /* Badges */
  --badge-height:        24px;
  --badge-padding-x:     var(--space-3);
  --badge-radius:        var(--radius-full);
  --badge-font-size:     var(--text-xs);

  /* Tags */
  --tag-height:          28px;
  --tag-padding-x:       var(--space-3);
  --tag-radius:          var(--radius-sm);
  --tag-font-size:       var(--text-xs);
}