/* ==========================================================================
   tokens.css — Twenty design system tokens
   Source: github.com/twentyhq/twenty  packages/twenty-ui/src/theme-constants/
   Accent swapped: Twenty blue → JetOS zinc monochrome (#18181b)
   Light theme only.
   ========================================================================== */

:root {

  /* ── Typography ────────────────────────────────────────────────────────── */
  --t-font-family:      'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --t-code-font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-font-size-xxs: 0.625rem;   /* 10px */
  --t-font-size-xs:  0.75rem;    /* 12px */
  --t-font-size-sm:  0.8125rem;  /* 13px */
  --t-font-size-md:  0.875rem;   /* 14px */
  --t-font-size-lg:  1rem;       /* 16px */
  --t-font-size-xl:  1.125rem;   /* 18px */
  --t-font-size-xxl: 1.25rem;    /* 20px */

  --t-font-weight-regular:   400;
  --t-font-weight-medium:    500;
  --t-font-weight-semi-bold: 600;

  --t-text-line-height-lg: 1.5;
  --t-text-line-height-md: 1.1;

  /* ── Spacing (4px base) ─────────────────────────────────────────────────── */
  --t-spacing-0:   0px;
  --t-spacing-0_5: 2px;
  --t-spacing-1:   4px;
  --t-spacing-1_5: 6px;
  --t-spacing-2:   8px;
  --t-spacing-3:   12px;
  --t-spacing-4:   16px;
  --t-spacing-5:   20px;
  --t-spacing-6:   24px;
  --t-spacing-8:   32px;
  --t-spacing-10:  40px;
  --t-spacing-12:  48px;
  --t-spacing-16:  64px;

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --t-border-radius-xs:      2px;
  --t-border-radius-sm:      4px;
  --t-border-radius-md:      8px;
  --t-border-radius-xl:      20px;
  --t-border-radius-pill:    999px;
  --t-border-radius-rounded: 100%;

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --t-animation-duration-instant: 75ms;
  --t-animation-duration-fast:    150ms;
  --t-animation-duration-normal:  300ms;
  --t-animation-duration-slow:    1500ms;

  /* ── Backgrounds (light) ───────────────────────────────────────────────── */
  --t-background-primary:            #ffffff;
  --t-background-secondary:          #fafafa;
  --t-background-tertiary:           #f5f5f5;
  --t-background-quaternary:         #ebebeb;
  --t-background-inverted-primary:   #333333;
  --t-background-inverted-secondary: #666666;
  --t-background-danger:             #fef2f2;
  --t-background-transparent-strong:  rgba(0, 0, 0, 0.16);
  --t-background-transparent-medium:  rgba(0, 0, 0, 0.08);
  --t-background-transparent-light:   rgba(0, 0, 0, 0.04);
  --t-background-transparent-lighter: rgba(0, 0, 0, 0.02);
  --t-background-overlay-primary:     rgba(0, 0, 0, 0.72);
  --t-background-overlay-secondary:   rgba(0, 0, 0, 0.36);
  --t-background-overlay-tertiary:    rgba(0, 0, 0, 0.07);

  /* ── Font Colors (light) — JetOS zinc scale ───────────────────────────── */
  --t-font-color-primary:     #09090b;  /* zinc-950 = JetOS foreground */
  --t-font-color-secondary:   #18181b;  /* zinc-900 */
  --t-font-color-tertiary:    #71717a;  /* zinc-500 = JetOS muted-foreground */
  --t-font-color-light:       #a1a1aa;  /* zinc-400 */
  --t-font-color-extra-light: #d4d4d8;  /* zinc-300 */
  --t-font-color-inverted:    #ffffff;
  --t-font-color-danger:      #ef4444;  /* JetOS destructive */

  /* ── Border Colors (light) — JetOS zinc scale ─────────────────────────── */
  --t-border-color-strong:   #d4d4d8;  /* zinc-300 */
  --t-border-color-medium:   #e4e4e7;  /* zinc-200 = JetOS --border */
  --t-border-color-light:    #f4f4f5;  /* zinc-100 */
  --t-border-color-inverted: #18181b;  /* zinc-900 */
  --t-border-color-danger:   #fca5a5;  /* red-300 */

  /* ── Box Shadows ───────────────────────────────────────────────────────── */
  --t-box-shadow-light:      0px 2px 4px 0px rgba(0,0,0,0.04), 0px 0px 4px 0px rgba(0,0,0,0.08);
  --t-box-shadow-strong:     2px 4px 16px 0px rgba(0,0,0,0.16), 0px 2px 4px 0px rgba(0,0,0,0.08);
  --t-box-shadow-super-heavy: 0px 0px 8px 0px rgba(0,0,0,0.16), 0px 8px 64px -16px rgba(0,0,0,0.48), 0px 24px 56px -16px rgba(0,0,0,0.08);
  --t-box-shadow-underline:  0px 1px 0px 0px rgba(0,0,0,0.36);

  /* ── Blur ──────────────────────────────────────────────────────────────── */
  --t-blur-light:  blur(6px) saturate(200%) contrast(50%) brightness(130%);
  --t-blur-medium: blur(12px) saturate(200%) contrast(50%) brightness(130%);
  --t-blur-strong: blur(20px) saturate(200%) contrast(50%) brightness(130%);

  /* ── Accent — JetOS zinc monochrome (matches JetOS primary palette) ─────── */
  --t-accent-primary:   #18181b;  /* zinc-900 = JetOS primary */
  --t-accent-secondary: #27272a;  /* zinc-800 */
  --t-accent-tertiary:  #f4f4f5;  /* zinc-100 */
  --t-accent-soft:      #f4f4f5;  /* zinc-100 */
  --t-accent-bg:        #fafafa;  /* zinc-50 */
  --t-accent-text:      #18181b;  /* zinc-900 */

  /* ── Gray Scale (12-step) ──────────────────────────────────────────────── */
  --t-gray-1:  #ffffff;
  --t-gray-2:  #fafafa;
  --t-gray-3:  #f5f5f5;
  --t-gray-4:  #eeeeee;
  --t-gray-5:  #e5e5e5;
  --t-gray-6:  #d9d9d9;
  --t-gray-7:  #cccccc;
  --t-gray-8:  #b3b3b3;
  --t-gray-9:  #999999;
  --t-gray-10: #808080;
  --t-gray-11: #666666;
  --t-gray-12: #333333;

  /* ── Named Colors ──────────────────────────────────────────────────────── */
  --t-color-red:       #d35452;
  --t-color-ruby:      #d3526b;
  --t-color-crimson:   #d84c81;
  --t-color-tomato:    #d5573a;
  --t-color-orange:    #e67c33;
  --t-color-amber:     #c49d00;
  --t-color-yellow:    #b8a000;
  --t-color-lime:      #6da624;
  --t-color-grass:     #3ca060;
  --t-color-green:     #2ea050;
  --t-color-jade:      #28a085;
  --t-color-mint:      #4fa882;
  --t-color-turquoise: #2da188;
  --t-color-cyan:      #2a9fc4;
  --t-color-sky:       #4895d0;
  --t-color-blue:      #4060d6;
  --t-color-iris:      #5b5bce;
  --t-color-violet:    #6a56c8;
  --t-color-purple:    #8550c0;
  --t-color-plum:      #9f50b5;
  --t-color-pink:      #c84b9c;
  --t-color-bronze:    #9c826e;
  --t-color-gold:      #948450;
  --t-color-brown:     #a6815e;
  --t-color-gray:      #999999;

  /* ── Tag Background Colors ─────────────────────────────────────────────── */
  --t-tag-background-gray:      #f5f5f5;
  --t-tag-background-red:       #fff0f0;
  --t-tag-background-orange:    #fff4ec;
  --t-tag-background-yellow:    #fefbe8;
  --t-tag-background-green:     #edfaf3;
  --t-tag-background-turquoise: #edfaf7;
  --t-tag-background-cyan:      #edfaff;
  --t-tag-background-blue:      #eff3ff;
  --t-tag-background-purple:    #f5eeff;
  --t-tag-background-pink:      #fff0f9;

  /* ── Tag Text Colors ───────────────────────────────────────────────────── */
  --t-tag-text-gray:      #666666;
  --t-tag-text-red:       #d35452;
  --t-tag-text-orange:    #cc6200;
  --t-tag-text-yellow:    #a07800;
  --t-tag-text-green:     #1e7a45;
  --t-tag-text-turquoise: #1e7a65;
  --t-tag-text-cyan:      #1e728a;
  --t-tag-text-blue:      #2a46b8;
  --t-tag-text-purple:    #6030a0;
  --t-tag-text-pink:      #a83080;

  /* ── Status / Snack Colors ─────────────────────────────────────────────── */
  --t-color-success:        #00a433;
  --t-color-success-bg:     #e6f7ec;
  --t-color-warning:        #e87c00;
  --t-color-warning-bg:     #fff4e5;
  --t-color-danger:         #d35452;
  --t-color-danger-bg:      #fef2f2;
  --t-color-info:           #4060d6;
  --t-color-info-bg:        #eff3ff;

  --t-snack-success-color:  #2da188;
  --t-snack-success-bg:     #e6f7f2;
  --t-snack-error-color:    #d35452;
  --t-snack-error-bg:       #fef2f2;
  --t-snack-warning-color:  #e87c00;
  --t-snack-warning-bg:     #fff4e5;
  --t-snack-info-color:     #4060d6;
  --t-snack-info-bg:        #eff3ff;

  /* ── Icon Sizes ────────────────────────────────────────────────────────── */
  --t-icon-size-sm: 14px;
  --t-icon-size-md: 16px;
  --t-icon-size-lg: 20px;
  --t-icon-size-xl: 24px;

  /* ── Modal Sizes ───────────────────────────────────────────────────────── */
  --t-modal-size-sm:  300px;
  --t-modal-size-md:  400px;
  --t-modal-size-lg:  600px;
  --t-modal-size-xl:  1200px;

  /* ── Table ─────────────────────────────────────────────────────────────── */
  --t-table-cell-padding-h: 8px;
  --t-table-cell-padding-v: 8px;
  --t-table-checkbox-col-w: 32px;
  --t-between-siblings-gap: 2px;

  /* ── Misc Layout ───────────────────────────────────────────────────────── */
  --t-side-panel-width: 500px;
  --t-transition-bg:    background var(--t-animation-duration-fast) ease;
}