/**
 * autowire Design System — CSS Custom Properties
 * Yatovi GmbH · DM Sans + DM Mono · Iconoir icons
 */

/* ─────────────────────────────────────────────
   FONTS  (local files — no Google Fonts needed)
   ───────────────────────────────────────────── */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ─────────────────────────────────────────────
     BASE COLORS
     ───────────────────────────────────────────── */

  /* Brand accent — electric yellow-green */
  --color-brand:       #E0F929;
  --color-brand-alt:   #F2FF00;
  --color-brand-dark:  #C8E000; /* pressed / slightly darker */

  /* Neutrals */
  --color-black:       #000000;
  --color-dark:        #242426;
  --color-dark-2:      #212121;
  --color-white:       #FFFFFF;
  --color-off-white:   #FCFCFE;

  /* Grays */
  --color-gray-100:    #F7F7F7;
  --color-gray-200:    #F5F8FC;
  --color-gray-300:    #EBEBF2;
  --color-gray-350:    #EBECF2;
  --color-gray-400:    #E1E1E1;
  --color-gray-450:    #DADADA;
  --color-gray-500:    #C4C4C4;
  --color-gray-600:    #B8B8B8;
  --color-gray-700:    #777777;
  --color-gray-750:    #858585;
  --color-gray-800:    #696969;
  --color-gray-850:    #444444;

  /* iOS system blues (used sparingly in prototype) */
  --color-ios-blue:    #007AFF;
  --color-ios-blue-2:  #0A84FF;

  /* ─────────────────────────────────────────────
     SEMANTIC COLORS
     ───────────────────────────────────────────── */

  /* Foreground / text */
  --fg-primary:        var(--color-black);
  --fg-secondary:      var(--color-gray-700);
  --fg-tertiary:       var(--color-gray-750);
  --fg-placeholder:    var(--color-gray-700);
  --fg-on-brand:       var(--color-black);
  --fg-on-dark:        var(--color-white);
  --fg-label:          var(--color-gray-750);    /* input labels */
  --fg-disabled:       var(--color-gray-600);

  /* Background */
  --bg-screen:         var(--color-white);
  --bg-screen-alt:     var(--color-gray-200);    /* secondary screen bg */
  --bg-card:           var(--color-white);
  --bg-tab-container:  var(--color-gray-350);
  --bg-tab-active:     #434343;
  --bg-overlay:        var(--color-dark);        /* bottom sheet */
  --bg-settings:       var(--color-brand);       /* settings page */

  /* Borders */
  --border-default:    var(--color-gray-400);
  --border-strong:     var(--color-black);
  --border-subtle:     var(--color-gray-450);

  /* Shadows */
  --shadow-low:     0px 0px 16px 0px rgba(0,0,0,0.08);
  --shadow-mid:     0px 0px 32px 0px rgba(0,0,0,0.16);
  --shadow-high:    0px 12px 32px 0px rgba(0,0,0,0.24);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────── */

  --font-sans:     "DM Sans", "Helvetica Neue", sans-serif;
  --font-mono:     "DM Mono", "Courier New", monospace;

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      900;

  /* Type scale */
  --text-display:  clamp(48px, 10vw, 96px);  /* brand display only */
  --text-h1:       28px;
  --text-h2:       20px;
  --text-h3:       18px;
  --text-body-l:   18px;
  --text-body-m:   16px;
  --text-body-s:   14px;
  --text-label:    14px;
  --text-caption:  12px;
  --text-micro:    11px;

  /* Mono scale */
  --text-mono-m:   15px;
  --text-mono-s:   14px;
  --text-mono-xs:  12px;
  --text-mono-xxs: 11px;

  /* Line heights */
  --lh-tight:      1.0;
  --lh-snug:       1.2;
  --lh-normal:     1.3;
  --lh-relaxed:    1.4;
  --lh-loose:      1.6;

  /* Letter spacing */
  --ls-tight:     -0.03em;
  --ls-snug:      -0.02em;
  --ls-normal:    -0.01em;
  --ls-none:       0;
  --ls-wide:       0.01em;

  /* ─────────────────────────────────────────────
     SPACING
     ───────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  --screen-padding-h:  20px;  /* horizontal screen edge padding */
  --card-padding:      16px;

  /* ─────────────────────────────────────────────
     BORDER RADII
     ───────────────────────────────────────────── */

  --radius-pill:      500px;   /* buttons, search, chips, avatar */
  --radius-card:       16px;   /* cards, customer image */
  --radius-modal:      32px;   /* top of bottom sheet overlays */
  --radius-input:      12px;   /* input fields approx */
  --radius-tab-item:    8px;   /* tab item active */
  --radius-tab-wrap:   10px;   /* tab container */
  --radius-tag:         8px;
  --radius-sm:          6px;
  --radius-screen:     40px;   /* device bezel */

  /* ─────────────────────────────────────────────
     COMPONENT TOKENS
     ───────────────────────────────────────────── */

  /* Primary button */
  --btn-primary-bg:      var(--color-brand);
  --btn-primary-fg:      var(--color-black);
  --btn-primary-radius:  var(--radius-pill);
  --btn-primary-h:       55px;
  --btn-primary-fs:      18px;
  --btn-primary-fw:      var(--fw-regular);

  /* Primary dark button */
  --btn-dark-bg:         var(--color-dark);
  --btn-dark-fg:         var(--color-white);

  /* Secondary button */
  --btn-secondary-border: 1px solid var(--color-black);
  --btn-secondary-bg:    transparent;
  --btn-secondary-fg:    var(--color-black);

  /* Icon button small */
  --btn-icon-sm-size:   44px;
  --btn-icon-sm-radius: 12px;
  --btn-icon-sm-bg:     var(--color-brand);

  /* Input */
  --input-bg:           var(--color-white);
  --input-border:       1px solid var(--border-default);
  --input-radius:       var(--radius-input);
  --input-h:            68px;
  --input-label-color:  var(--fg-label);
  --input-label-fs:     14px;
  --input-text-fs:      18px;
}

/* ─────────────────────────────────────────────
   SEMANTIC HTML ELEMENT STYLES
   ───────────────────────────────────────────── */

body {
  font-family:  var(--font-sans);
  font-size:    var(--text-body-m);
  font-weight:  var(--fw-regular);
  line-height:  var(--lh-normal);
  color:        var(--fg-primary);
  background:   var(--bg-screen);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-family:   var(--font-sans);
  font-size:     var(--text-h1);
  font-weight:   var(--fw-bold);
  line-height:   var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color:         var(--fg-primary);
  margin: 0;
}

h2 {
  font-family:   var(--font-sans);
  font-size:     var(--text-h2);
  font-weight:   var(--fw-bold);
  line-height:   var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color:         var(--fg-primary);
  margin: 0;
}

h3 {
  font-family:   var(--font-sans);
  font-size:     var(--text-h3);
  font-weight:   var(--fw-medium);
  line-height:   var(--lh-snug);
  color:         var(--fg-primary);
  margin: 0;
}

p {
  font-family:   var(--font-sans);
  font-size:     var(--text-body-m);
  font-weight:   var(--fw-regular);
  line-height:   var(--lh-relaxed);
  color:         var(--fg-primary);
  margin: 0;
}

/* Mono / metadata text */
.mono, time, code {
  font-family:   var(--font-mono);
  font-size:     var(--text-mono-s);
  font-weight:   var(--fw-regular);
  line-height:   var(--lh-relaxed);
  color:         var(--fg-secondary);
}

/* Input label */
label {
  font-family:   var(--font-sans);
  font-size:     var(--text-label);
  font-weight:   var(--fw-regular);
  color:         var(--fg-label);
}