/**
 * ECOFACTOR Design System — Base CSS v0.2.0
 *
 * Single source of truth: ../tokens/tokens.json
 * AI guide: ../ECOFACTOR_UI_GUIDE.md
 *
 * Usage:
 *   @import '../../design-system/presets/base.css';
 *   @tailwind base;
 *   @tailwind components;
 *   @tailwind utilities;
 *
 * Material Design v3-inspired token model:
 * Surface tiers / Container roles / Text/Icon/Outline hierarchies / State overlays.
 */

/* ── Fonts ───────────────────────────────────────────────────────── */
/* Platform default — Pulse SaaS, DOS, Finance dashboards */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
/* Marketing body — landing pages */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
/* Code, telemetry, terminal */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
/* Inter — fallback for missing Ruberoid / TT Lakes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* TT Lakes (engineering) and Ruberoid (marketing headings) are corporate
 * fonts — drop their .woff2 files into design-system/assets/fonts/ and
 * @font-face them here, OR rely on the Inter fallback. */

/* ── Light theme (default) ───────────────────────────────────────── */
:root {
  /* Surface tiers */
  --surface-page: #F2F2F2;
  --surface-1:    #FFFFFF;
  --surface-2:    #F6F6F6;
  --surface-3:    #E3E3E3;

  /* Container roles (CTAs, alerts, status emphasis) */
  --container-action:         #10B452;
  --container-action-pressed: #008033;
  --container-error:          #F2473A;
  --container-warning:        #FF9A3D;
  --container-success:        #10B452;
  --container-info:           #3577D8;

  /* Text hierarchy */
  --text-primary:   #393939;
  --text-secondary: #61646B;
  --text-tertiary:  #B0B2B5;
  --text-action:    #10B452;
  --text-reversed:  #FFFFFF;
  --text-error:     #F2473A;

  /* Icon hierarchy */
  --icon-primary:   #393939;
  --icon-secondary: #61646B;
  --icon-tertiary:  #999999;
  --icon-action:    #10B452;
  --icon-reversed:  #FFFFFF;

  /* Outline */
  --outline-primary:   #666666;
  --outline-secondary: #B0B2B5;
  --outline-action:    #10B452;
  --outline-accent:    #3545EE;

  /* State overlays */
  --state-disabled-bg:     rgba(0, 0, 0, 0.06);
  --state-disabled-text:   #B0B2B5;
  --state-hover-overlay:   rgba(0, 0, 0, 0.05);
  --state-pressed-overlay: rgba(16, 180, 82, 0.15);
  --state-focus-ring:      rgba(16, 180, 82, 0.30);

  /* Brand (theme-independent) */
  --brand-primary:        #10B452;
  --brand-primary-hover:  #0E9D47;
  --brand-primary-pressed: #008033;
  --brand-accent:         #3AF185;  /* Energy / Public Pulse / charging motion */
  --brand-secondary:      #008033;

  /* Gradients */
  --gradient-hero:   linear-gradient(180deg, #3AF185 0%, #3AE485 21%, #1E1E1E 100%);
  --gradient-subtle: linear-gradient(180deg, #f0fef5 0%, #FFFFFF 100%);

  /* Motion */
  --duration-fast:         150ms;
  --duration-normal:       300ms;
  --duration-slow:         500ms;
  --duration-energy-flow:  2000ms;
  --duration-energy-pulse: 3000ms;
  --duration-counter:      1200ms;
  --ease-default: ease-in-out;
  --ease-energy:  cubic-bezier(0.4, 0, 0.6, 1);
  --ease-pulse:   cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast:   150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow:   500ms ease-in-out;

  /* Per-layer fonts */
  --font-marketing-heading: 'Ruberoid', 'Inter', system-ui, sans-serif;
  --font-marketing-body:    'Open Sans', system-ui, sans-serif;
  --font-platform:          'Roboto', system-ui, sans-serif;
  --font-engineering:       'TT Lakes', 'Inter', system-ui, sans-serif;
  --font-mono:              'JetBrains Mono', Consolas, monospace;

  /* Sidebar (Internal Platform) */
  --sidebar-bg:     #1E1E1E;
  --sidebar-text:   #ECEBEB;
  --sidebar-active: rgba(16, 180, 82, 0.15);
}

/* ── Dark theme ──────────────────────────────────────────────────── */
[data-theme="dark"], .dark {
  --surface-page: #1A1A1A;
  --surface-1:    #1E1E1E;
  --surface-2:    #262626;
  --surface-3:    #3A3A3A;

  --container-action:         #7DD8A2;
  --container-action-pressed: #10B452;
  --container-error:          #E7867E;
  --container-warning:        #EAB686;
  --container-success:        #7DD8A2;
  --container-info:           #3577D8;

  --text-primary:   #ECEBEB;
  --text-secondary: #B0B2B5;
  --text-tertiary:  #858585;
  --text-action:    #7DD8A2;
  --text-reversed:  #1E1E1E;
  --text-error:     #E7867E;

  --icon-primary:   #ECEBEB;
  --icon-secondary: #B0B2B5;
  --icon-tertiary:  #666666;
  --icon-action:    #7DD8A2;
  --icon-reversed:  #1E1E1E;

  --outline-primary:   #494B50;
  --outline-secondary: #3A3A3A;
  --outline-action:    #7DD8A2;
  --outline-accent:    #3545EE;

  --state-disabled-bg:     rgba(255, 255, 255, 0.06);
  --state-disabled-text:   #666666;
  --state-hover-overlay:   rgba(255, 255, 255, 0.05);
  --state-pressed-overlay: rgba(125, 216, 162, 0.20);
  --state-focus-ring:      rgba(125, 216, 162, 0.30);
}

/* ── Base layer ──────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-platform);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Per-layer themes (apply on a wrapper element) */
  .theme-marketing  { font-family: var(--font-marketing-body); }
  .theme-marketing h1, .theme-marketing h2,
  .theme-marketing h3, .theme-marketing h4 { font-family: var(--font-marketing-heading); }

  .theme-platform    { font-family: var(--font-platform); }
  .theme-engineering { font-family: var(--font-engineering); }
}

/* ── Components ──────────────────────────────────────────────────── */
@layer components {

  /* ── BUTTONS — sizes per Figma spec (Large 60 / Middle 44) ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--font-platform);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast),
                border-color var(--duration-fast), opacity var(--duration-fast);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--state-focus-ring);
  }
  .btn:disabled {
    cursor: not-allowed;
    background: var(--state-disabled-bg);
    color: var(--state-disabled-text);
    border-color: transparent;
  }

  .btn-large { height: 60px; padding: 0 24px; font-size: 16px; }
  .btn-icon  { width: 48px; height: 48px; padding: 0; }

  .btn-primary {
    background: var(--container-action);
    color: var(--text-reversed);
  }
  .btn-primary:hover:not(:disabled) { background: var(--container-action-pressed); }

  .btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--outline-primary);
  }
  .btn-secondary:hover:not(:disabled) { background: var(--state-hover-overlay); }

  .btn-danger {
    background: var(--container-error);
    color: var(--text-reversed);
  }
  .btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

  .btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--outline-secondary);
    border-radius: 9999px;
  }
  .btn-ghost:hover:not(:disabled) { background: var(--state-hover-overlay); }

  /* ── CARDS ──────────────────────────────────────────────────── */
  .card {
    background: var(--surface-1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: box-shadow var(--duration-normal);
  }
  .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }

  /* ── INPUTS ─────────────────────────────────────────────────── */
  .input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: var(--surface-1);
    color: var(--text-primary);
    border: 1px solid var(--outline-secondary);
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--font-platform);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  .input::placeholder { color: var(--text-tertiary); }
  .input:focus {
    outline: none;
    border-color: var(--outline-action);
    box-shadow: 0 0 0 3px var(--state-focus-ring);
  }
  .input:disabled {
    background: var(--state-disabled-bg);
    color: var(--state-disabled-text);
    cursor: not-allowed;
  }

  /* ── BADGES (status) ─────────────────────────────────────────── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
  }
  .badge-success,
  .badge-online { background: color-mix(in srgb, var(--container-success) 15%, transparent); color: var(--container-success); }
  .badge-charging { background: color-mix(in srgb, var(--container-info) 15%, transparent); color: var(--container-info); }
  .badge-warning,
  .badge-suspended { background: color-mix(in srgb, var(--container-warning) 15%, transparent); color: var(--container-warning); }
  .badge-error,
  .badge-fault { background: color-mix(in srgb, var(--container-error) 15%, transparent); color: var(--container-error); }
  .badge-info { background: color-mix(in srgb, var(--container-info) 15%, transparent); color: var(--container-info); }
  .badge-offline { background: color-mix(in srgb, var(--text-tertiary) 18%, transparent); color: var(--text-tertiary); }
  .badge-preparing { background: color-mix(in srgb, #10AAB4 15%, transparent); color: #10AAB4; }

  /* ── TABLE ──────────────────────────────────────────────────── */
  .table {
    width: 100%;
    background: var(--surface-1);
    border-radius: 16px;
    overflow: hidden;
    border-collapse: collapse;
  }
  .table thead { background: var(--surface-2); }
  .table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--outline-secondary);
  }
  .table td {
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--outline-secondary);
  }
  .table tbody tr:last-child td { border-bottom: none; }
  .table tbody tr:hover { background: var(--surface-2); }

  /* Backwards-compat with v0.1 (.table-header / .table-row / .table-cell) */
  .table-header { background: var(--surface-2); color: var(--text-secondary); font-weight: 600; font-size: 14px; }
  .table-row    { border-bottom: 1px solid var(--outline-secondary); }
  .table-row:hover { background: var(--surface-2); }
  .table-cell   { padding: 12px 16px; color: var(--text-primary); font-size: 16px; }

  /* ── NAVIGATION (sidebar items) ──────────────────────────────── */
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
  }
  .nav-item:hover {
    background: var(--state-hover-overlay);
    color: var(--text-primary);
  }
  .nav-item-active {
    background: color-mix(in srgb, var(--container-action) 12%, transparent);
    color: var(--text-action);
    border-left: 3px solid var(--container-action);
  }
}

/* ── Energy motion (Public Pulse, charging visualizations) ──────── */
@keyframes flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -120; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.energy-flow  { animation: flow var(--duration-energy-flow) linear infinite; }
.energy-pulse { animation: breathe var(--duration-energy-pulse) ease-in-out infinite; }