/* ============================================================
   RIIF — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
  ---------------------------------------------------------- */

  /* Primary — Teal */
  --color-primary-400: #2DD4BF;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;
  --color-primary-700: #0F766E;
  --color-primary-800: #115E59;

  /* Secondary accent — Steel Blue */
  --color-purple-400: #60A5FA;
  --color-purple-500: #3B82F6;
  --color-purple-600: #2563EB;
  --color-purple-700: #1D4ED8;
  --color-purple-800: #1E40AF;

  /* Accent — Sky Blue */
  --color-sky-300: #7DD3FC;
  --color-sky-400: #38BDF8;
  --color-sky-500: #0EA5E9;
  --color-sky-600: #0284C7;

  /* Accent — Soft Teal */
  --color-violet-300: #99F6E4;
  --color-violet-400: #5EEAD4;
  --color-violet-500: #2DD4BF;
  --color-violet-600: #14B8A6;

  /* Secondary — Deep Navy */
  --color-navy-900: #0A1628;
  --color-navy-800: #0F1F3D;
  --color-navy-700: #162B4D;
  --color-navy-600: #1E3A5F;

  /* Semantic Aliases */
  --color-primary:        var(--color-primary-600);
  --color-primary-hover:  var(--color-primary-700);
  --color-secondary:      var(--color-navy-800);
  --color-accent:         var(--color-sky-400);
  --color-accent-purple:  var(--color-violet-400);

  /* ----------------------------------------------------------
     NEUTRAL / TEXT / BACKGROUND
  ---------------------------------------------------------- */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-disabled:  #9CA3AF;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      var(--color-primary-600);

  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F8F9FC;
  --color-bg-blue:        #F0F4FF;
  --color-bg-dark:        var(--color-navy-800);
  --color-bg-darker:      var(--color-navy-900);

  --color-border:         #E5E7EB;
  --color-border-light:   #F3F4F6;
  --color-border-medium:  #D1D5DB;
  --color-border-focus:   var(--color-primary-500);

  /* Status */
  --color-success:  #10B981;
  --color-warning:  #F59E0B;
  --color-error:    #EF4444;
  --color-info:     #3B82F6;

  --color-success-bg: #ECFDF5;
  --color-warning-bg: #FFFBEB;
  --color-error-bg:   #FEF2F2;
  --color-info-bg:    #EFF6FF;

  /* ----------------------------------------------------------
     GRADIENTS
  ---------------------------------------------------------- */
  --gradient-primary:         linear-gradient(135deg, #0D9488 0%, #0284C7 100%);
  --gradient-primary-soft:    linear-gradient(135deg, #F0FDFA 0%, #EFF6FF 100%);
  --gradient-primary-vivid:   linear-gradient(135deg, #0F766E 0%, #0369A1 100%);
  --gradient-sky:             linear-gradient(135deg, #2DD4BF 0%, #38BDF8 100%);
  --gradient-aurora:          linear-gradient(135deg, #0D9488 0%, #0284C7 50%, #2DD4BF 100%);
  --gradient-dark:            linear-gradient(135deg, #0A1628 0%, #0F1F3D 100%);
  --gradient-hero:            linear-gradient(160deg, #050E1F 0%, #0A1628 40%, #0F2040 100%);
  --gradient-glass:           linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-card-hover:      linear-gradient(135deg, rgba(13,148,136,0.06) 0%, rgba(2,132,199,0.06) 100%);
  --gradient-text:            linear-gradient(135deg, #0D9488 0%, #0284C7 100%);
  --gradient-text-sky:        linear-gradient(135deg, #2DD4BF 0%, #38BDF8 100%);
  --gradient-animated-start:  #0D9488;
  --gradient-animated-end:    #0284C7;

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-sans:   'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-en:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Scale */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */

  /* Weight */
  --font-thin:        100;
  --font-extralight:  200;
  --font-light:       300;
  --font-normal:      400;
  --font-medium:      500;
  --font-semibold:    600;
  --font-bold:        700;
  --font-extrabold:   800;
  --font-black:       900;

  /* Line Height */
  --leading-none:     1;
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */

  /* Section Padding */
  --section-padding-y:        7.5rem;  /* 120px */
  --section-padding-y-md:     5rem;    /*  80px */
  --section-padding-y-sm:     3rem;    /*  48px */

  /* Container */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  960px;
  --container-px:      1.5rem;     /* 24px */
  --container-px-sm:   1rem;       /* 16px */

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-none:   0;
  --radius-sm:     0.25rem;    /*  4px */
  --radius-md:     0.5rem;     /*  8px */
  --radius-lg:     0.75rem;    /* 12px */
  --radius-xl:     1rem;       /* 16px */
  --radius-2xl:    1.25rem;    /* 20px */
  --radius-3xl:    1.5rem;     /* 24px */
  --radius-full:   9999px;

  /* Card radius */
  --radius-card:        var(--radius-xl);
  --radius-card-sm:     var(--radius-lg);
  --radius-card-lg:     var(--radius-2xl);
  --radius-btn:         var(--radius-md);
  --radius-btn-pill:    var(--radius-full);
  --radius-badge:       var(--radius-full);
  --radius-input:       var(--radius-md);
  --radius-modal:       var(--radius-2xl);

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-xs:     0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:     0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:     0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:     0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl:    0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-inner:  inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none:   none;

  /* Colored shadows */
  --shadow-primary:    0 10px 30px -5px rgba(13, 148, 136, 0.35);
  --shadow-primary-sm: 0 4px 14px 0 rgba(13, 148, 136, 0.28);
  --shadow-sky:        0 10px 30px -5px rgba(56, 189, 248, 0.3);
  --shadow-purple:     0 10px 30px -5px rgba(2, 132, 199, 0.3);
  --shadow-dark:       0 20px 40px -10px rgba(5, 14, 31, 0.5);

  /* Card shadows */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(13, 148, 136, 0.1);

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --ease-linear:   linear;
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-75:   75ms;
  --duration-100:  100ms;
  --duration-150:  150ms;
  --duration-200:  200ms;
  --duration-300:  300ms;
  --duration-500:  500ms;
  --duration-700:  700ms;
  --duration-1000: 1000ms;

  --transition-base:       all var(--duration-200) var(--ease-in-out);
  --transition-color:      color var(--duration-200) var(--ease-in-out), background-color var(--duration-200) var(--ease-in-out), border-color var(--duration-200) var(--ease-in-out);
  --transition-transform:  transform var(--duration-300) var(--ease-out);
  --transition-shadow:     box-shadow var(--duration-300) var(--ease-out);
  --transition-opacity:    opacity var(--duration-200) var(--ease-in-out);
  --transition-smooth:     all var(--duration-300) var(--ease-smooth);

  /* ----------------------------------------------------------
     BREAKPOINTS  (reference — use in media queries directly)
  ---------------------------------------------------------- */
  /* --bp-xs:  480px  */
  /* --bp-sm:  768px  */
  /* --bp-md: 1024px  */
  /* --bp-lg: 1280px  */
  /* --bp-xl: 1440px  */

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --navbar-height:        72px;
  --navbar-height-sm:     60px;
  --sidebar-width:        280px;
  --grid-cols:            12;
  --grid-gap:             var(--space-6);
  --grid-gap-sm:          var(--space-4);

  /* ----------------------------------------------------------
     GLASS / FROSTED EFFECT
  ---------------------------------------------------------- */
  --glass-bg:           rgba(255, 255, 255, 0.08);
  --glass-bg-light:     rgba(255, 255, 255, 0.6);
  --glass-border:       rgba(255, 255, 255, 0.15);
  --glass-border-dark:  rgba(255, 255, 255, 0.08);
  --glass-blur:         blur(20px);
  --glass-blur-sm:      blur(10px);

}