/* ============================================================
   ROLSOFTWARE DESIGN SYSTEM — colors_and_type.css
   Source: rolsoftware/web.rolsoftware.ro (Tailwind + canvas-ui SCSS)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Karla:wght@300;400;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Primary — Indigo (Tailwind indigo-*) */
  --color-indigo-50:  #EEF2FF;
  --color-indigo-100: #E0E7FF;
  --color-indigo-200: #C7D2FE;
  --color-indigo-300: #A5B4FC;
  --color-indigo-400: #818CF8;
  --color-indigo-500: #6366F1;
  --color-indigo-600: #4F46E5;   /* PRIMARY */
  --color-indigo-700: #4338CA;   /* PRIMARY HOVER */
  --color-indigo-800: #3730A3;
  --color-indigo-900: #312E81;

  /* Neutral — Slate (Tailwind slate-*) */
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;    /* MUTED TEXT */
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;    /* FOOTER BG */
  --color-slate-900: #0F172A;    /* DARK BG */

  /* Neutral — Gray (canvas-ui SCSS scale) */
  --color-gray-100: #F7FAFC;
  --color-gray-200: #EDF2F7;
  --color-gray-300: #E2E8F0;
  --color-gray-400: #CBD5E0;
  --color-gray-500: #A0AEC0;
  --color-gray-600: #718096;
  --color-gray-700: #4A5568;
  --color-gray-800: #2D3748;
  --color-gray-900: #1A202C;

  /* Status */
  --color-green:  #03A87C;  /* progress bar, success */
  --color-blue:   #54AFCC;  /* informational */
  --color-red:    #CC5454;  /* error/danger */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */

  /* Foreground */
  --fg-primary:      #000000;
  --fg-secondary:    var(--color-slate-400);
  --fg-muted:        var(--color-slate-400);
  --fg-inverted:     #FFFFFF;
  --fg-accent:       var(--color-indigo-600);
  --fg-accent-hover: var(--color-indigo-700);

  /* Background */
  --bg-primary:      #FFFFFF;
  --bg-secondary:    var(--color-slate-50);
  --bg-dark:         var(--color-slate-900);
  --bg-footer:       var(--color-slate-800);
  --bg-accent-subtle: color-mix(in srgb, var(--color-indigo-600) 5%, transparent);

  /* Borders */
  --border-light:    var(--color-slate-100, #F1F5F9);
  --border-default:  var(--color-gray-300);
  --border-dark:     var(--color-gray-800, #1F2937);

  /* Interactive */
  --btn-primary-bg:       var(--color-indigo-600);
  --btn-primary-bg-hover: var(--color-indigo-700);
  --btn-primary-text:     #FFFFFF;
  --btn-ghost-bg:         color-mix(in srgb, var(--color-indigo-600) 5%, transparent);
  --btn-ghost-text:       var(--color-indigo-600);
  --btn-ghost-border:     color-mix(in srgb, var(--color-indigo-600) 10%, transparent);

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

  /* Font Families */
  --font-sans:    'Nunito', sans-serif;       /* primary body & UI */
  --font-karla:   'Karla', sans-serif;        /* internal apps / canvas-ui */
  --font-serif:   'Merriweather', serif;      /* editorial / post content */

  /* Font Weights */
  --fw-light:     300;
  --fw-normal:    400;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Font Sizes */
  --fs-xs:    0.75rem;   /* 12px — eyebrow labels */
  --fs-sm:    0.875rem;  /* 14px — small text */
  --fs-base:  1rem;      /* 16px — body */
  --fs-lg:    1.125rem;  /* 18px — lead text */
  --fs-xl:    1.25rem;   /* 20px */
  --fs-2xl:   1.5rem;    /* 24px — h3 mobile */
  --fs-3xl:   1.875rem;  /* 30px — h3 desktop */
  --fs-4xl:   2.25rem;   /* 36px — h1 mobile */
  --fs-5xl:   3rem;      /* 48px — h1 desktop */

  /* Line Heights */
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   2;

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

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --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 — card padding */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px — section py mobile */
  --space-24: 6rem;      /* 96px — section py desktop */
  --space-30: 1.875rem;  /* 30px — grid gap */

  /* Border Radii */
  --radius-sm:   0.25rem;   /* 4px — rounded */
  --radius-md:   0.375rem;  /* 6px — rounded-md */
  --radius-lg:   0.5rem;    /* 8px — rounded-lg */
  --radius-full: 9999px;    /* rounded-full */

  /* ============================================================
     SHADOW TOKENS
     ============================================================ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-card:       0 2px 4px 0 rgba(0, 0, 0, 0.1);
  --shadow-card-hover: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);

  /* ============================================================
     ANIMATION TOKENS
     ============================================================ */
  --transition-base:   all 0.5s ease;
  --transition-card:   transform 0.3s cubic-bezier(0.34, 2, 0.6, 1), box-shadow 0.2s ease;
  --easing-bounce:     cubic-bezier(0.34, 2, 0.6, 1);
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
.dark, [data-theme="dark"] {
  --fg-primary:   #FFFFFF;
  --bg-primary:   var(--color-slate-900);
  --border-light: var(--color-gray-800);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
body, .rs-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  background: var(--bg-primary);
}

h1, .rs-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
@media (min-width: 1024px) {
  h1, .rs-h1 { font-size: var(--fs-5xl); }
}

h2, .rs-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h3, .rs-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
@media (min-width: 768px) {
  h3, .rs-h3 { font-size: var(--fs-3xl); }
}

h4, .rs-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

h5, .rs-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* Eyebrow / label */
.rs-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-accent);
}

/* Body */
p, .rs-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
}

.rs-lead {
  font-size: var(--fs-lg);
  color: var(--fg-secondary);
}

/* Editorial / Post content */
.rs-editorial {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: var(--lh-loose);
}

/* Code / Mono */
code, .rs-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--fs-sm);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.3em;
}

/* ============================================================
   COMPONENT STYLES
   ============================================================ */

/* Buttons */
.rs-btn-primary {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-bg);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}
.rs-btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}

.rs-btn-ghost {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border: 1px solid var(--btn-ghost-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}
.rs-btn-ghost:hover {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: white;
}

/* Card */
.rs-card {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  overflow: hidden;
  position: relative;
  transition: var(--transition-card);
}
.rs-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}