/* style.css — MBS IoT Industrial Automation Design System */

/* ===== FONTS ===== */
/* Clash Display (headings) + Satoshi (body) from Fontshare */

/* ===== TYPE SCALE ===== */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* Font families */
  --font-display: 'Clash Display', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;

  /* ===== SPACING (4px base) ===== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ===== RADIUS ===== */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== CONTENT WIDTHS ===== */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ===== DARK THEME (DEFAULT) ===== */
/* MBS IoT: dark charcoal base with electric cyan/blue accent — industrial tech */
:root, [data-theme="dark"] {
  --color-bg:               #141618;
  --color-surface:          #1a1d20;
  --color-surface-2:        #1f2226;
  --color-surface-offset:   #1c1f23;
  --color-surface-offset-2: #24282d;
  --color-surface-dynamic:  #2a2f35;
  --color-divider:          #2e3338;
  --color-border:           #383e45;

  --color-text:             #e0e4e8;
  --color-text-muted:       #8a919a;
  --color-text-faint:       #555c66;
  --color-text-inverse:     #141618;

  /* Primary — electric cyan/blue (industrial tech accent) */
  --color-primary:          #00b4d8;
  --color-primary-hover:    #0096b7;
  --color-primary-active:   #007a99;
  --color-primary-highlight: #0e2a32;

  /* Secondary subtle glow */
  --color-primary-glow:     oklch(0.65 0.16 220 / 0.15);

  /* Warning */
  --color-warning:          #e8a737;
  --color-warning-hover:    #d09020;
  --color-warning-active:   #b07812;
  --color-warning-highlight: #2e2616;

  /* Error */
  --color-error:            #e05555;
  --color-error-hover:      #c94040;
  --color-error-active:     #a82e2e;
  --color-error-highlight:  #301a1a;

  /* Success */
  --color-success:          #4caf68;
  --color-success-hover:    #389a50;
  --color-success-active:   #28803c;
  --color-success-highlight: #1a2e1e;

  /* Shadows — dark mode */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --color-bg:               #f2f4f6;
  --color-surface:          #ffffff;
  --color-surface-2:        #fafbfc;
  --color-surface-offset:   #eaedf0;
  --color-surface-offset-2: #e2e6ea;
  --color-surface-dynamic:  #d8dce2;
  --color-divider:          #cdd2d8;
  --color-border:           #bec4cc;

  --color-text:             #1a1e24;
  --color-text-muted:       #5a6370;
  --color-text-faint:       #9ca3ad;
  --color-text-inverse:     #f2f4f6;

  /* Primary — deeper blue for light mode readability */
  --color-primary:          #0077a8;
  --color-primary-hover:    #005f8a;
  --color-primary-active:   #004a6e;
  --color-primary-highlight: #d8eef6;

  --color-primary-glow:     oklch(0.55 0.14 220 / 0.08);

  /* Warning */
  --color-warning:          #c08520;
  --color-warning-hover:    #9e6e18;
  --color-warning-active:   #7d5610;
  --color-warning-highlight: #f6eed4;

  /* Error */
  --color-error:            #c0392b;
  --color-error-hover:      #a02e22;
  --color-error-active:     #80231a;
  --color-error-highlight:  #f8dbd8;

  /* Success */
  --color-success:          #2e8b40;
  --color-success-hover:    #227632;
  --color-success-active:   #1a6028;
  --color-success-highlight: #d6f0dc;

  /* Shadows — light mode */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 240 / 0.1);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 240 / 0.14);
}

/* System preference fallback */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #f2f4f6;
    --color-surface:          #ffffff;
    --color-surface-2:        #fafbfc;
    --color-surface-offset:   #eaedf0;
    --color-surface-offset-2: #e2e6ea;
    --color-surface-dynamic:  #d8dce2;
    --color-divider:          #cdd2d8;
    --color-border:           #bec4cc;
    --color-text:             #1a1e24;
    --color-text-muted:       #5a6370;
    --color-text-faint:       #9ca3ad;
    --color-text-inverse:     #f2f4f6;
    --color-primary:          #0077a8;
    --color-primary-hover:    #005f8a;
    --color-primary-active:   #004a6e;
    --color-primary-highlight: #d8eef6;
    --color-primary-glow:     oklch(0.55 0.14 220 / 0.08);
    --color-warning:          #c08520;
    --color-warning-hover:    #9e6e18;
    --color-warning-active:   #7d5610;
    --color-warning-highlight: #f6eed4;
    --color-error:            #c0392b;
    --color-error-hover:      #a02e22;
    --color-error-active:     #80231a;
    --color-error-highlight:  #f8dbd8;
    --color-success:          #2e8b40;
    --color-success-hover:    #227632;
    --color-success-active:   #1a6028;
    --color-success-highlight: #d6f0dc;
    --shadow-sm: 0 1px 2px oklch(0.2 0.01 240 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.2 0.01 240 / 0.1);
    --shadow-lg: 0 12px 32px oklch(0.2 0.01 240 / 0.14);
  }
}