/* Outis design tokens. The ladder here is the one apps/dashboard/src/lib/design.css
   carries, value for value. Phosphor (--ph-*) re-tubes; semantics (--alert /
   --go / --info) never do. --ph-brand is amber for exactly two things, Cy's
   sprites and the OUTIS wordmark; on a plain tube it follows --ph. The glass
   emits #FFA200 and is calibrated to it; the panel mirror draws that one. */

:root {
  /* == the default tube == */
  --ph:        #B9B5AC;
  --ph-hot:    #E4E0D6;
  --ph-bright: #F0ECE2;
  --ph-text:   #C9C5BC;
  --ph-text2:  #A8A49B;
  --ph-mute:   #8A8780;
  --ph-mute2:  #726F69;
  --ph-dim:    #7C7973;
  --ph-dim2:   #94918A;
  --ph-dim3:   #5E5B56;
  --ph-slot:   #43413D;
  --ph-rgb:    185, 181, 172;
  --ph-brand:  #FFC200;
  --tube-dirty: none;
  --tube-name: "WARM GRAY";
}

[data-tube="warmgreyamber"] {
  --ph:        #B9B5AC;
  --ph-hot:    #E4E0D6;
  --ph-bright: #F0ECE2;
  --ph-text:   #C9C5BC;
  --ph-text2:  #A8A49B;
  --ph-mute:   #8A8780;
  --ph-mute2:  #726F69;
  --ph-dim:    #7C7973;
  --ph-dim2:   #94918A;
  --ph-dim3:   #5E5B56;
  --ph-slot:   #43413D;
  --ph-rgb:    185, 181, 172;
  --ph-brand:  #FFC200;
  --tube-dirty: none;
  --tube-name: "WARM GRAY";
}

[data-tube="amber"] {
  --ph:        #FFC200;
  --ph-hot:    #FFE9A8;
  --ph-bright: #FFF6E1;
  --ph-text:   #E8DEC8;
  --ph-text2:  #C8BC9F;
  --ph-mute:   #A79B80;
  --ph-mute2:  #8F8570;
  --ph-dim:    #A87E00;
  --ph-dim2:   #C08A00;
  --ph-dim3:   #8A6A00;
  --ph-slot:   #6E5000;
  --ph-rgb:    255, 194, 0;
  --ph-brand:  #FFC200;
  --tube-dirty: none;
  --tube-name: "AMBER";
}

[data-tube="green"] {
  --ph:        #3FE06B;
  --ph-hot:    #C8FFD8;
  --ph-bright: #E6FFEE;
  --ph-text:   #CDE8D4;
  --ph-text2:  #A8CDB2;
  --ph-mute:   #86A98F;
  --ph-mute2:  #6E8B76;
  --ph-dim:    #2E9B52;
  --ph-dim2:   #37B863;
  --ph-dim3:   #22713C;
  --ph-slot:   #1B5730;
  --ph-rgb:    63, 224, 107;
  --ph-brand:  #3FE06B;
  --tube-dirty: none;
  --tube-name: "GREEN";
}

[data-tube="cyan"] {
  --ph:        #59C6C6;
  --ph-hot:    #C6F0F0;
  --ph-bright: #E2F5F5;
  --ph-text:   #C2DCDC;
  --ph-text2:  #9CBDBD;
  --ph-mute:   #7D9C9C;
  --ph-mute2:  #667F7F;
  --ph-dim:    #3E8C8C;
  --ph-dim2:   #4AA3A3;
  --ph-dim3:   #2E6868;
  --ph-slot:   #234E4E;
  --ph-rgb:    89, 198, 198;
  --ph-brand:  #59C6C6;
  --tube-dirty: block;
  --tube-name: "DIRTY CYAN";
}

[data-tube="blue"] {
  --ph:        #6E9BD6;
  --ph-hot:    #CFDFF3;
  --ph-bright: #E6EEF8;
  --ph-text:   #C6D4E6;
  --ph-text2:  #A0B0C6;
  --ph-mute:   #808FA3;
  --ph-mute2:  #697687;
  --ph-dim:    #4A6E9B;
  --ph-dim2:   #5883B5;
  --ph-dim3:   #375273;
  --ph-slot:   #2A3C55;
  --ph-rgb:    110, 155, 214;
  --ph-brand:  #6E9BD6;
  --tube-dirty: block;
  --tube-name: "DIRTY BLUE";
}

[data-tube="gray"] {
  --ph:        #D8D8D8;
  --ph-hot:    #F2F2F2;
  --ph-bright: #FFFFFF;
  --ph-text:   #DCDCDC;
  --ph-text2:  #B8B8B8;
  --ph-mute:   #949494;
  --ph-mute2:  #7A7A7A;
  --ph-dim:    #8E8E8E;
  --ph-dim2:   #A8A8A8;
  --ph-dim3:   #6A6A6A;
  --ph-slot:   #4A4A4A;
  --ph-rgb:    216, 216, 216;
  --ph-brand:  #D8D8D8;
  --tube-dirty: none;
  --tube-name: "GRAY";
}

[data-tube="dgray"] {
  --ph:        #B9B5AC;
  --ph-hot:    #E4E0D6;
  --ph-bright: #F0ECE2;
  --ph-text:   #C9C5BC;
  --ph-text2:  #A8A49B;
  --ph-mute:   #8A8780;
  --ph-mute2:  #726F69;
  --ph-dim:    #7C7973;
  --ph-dim2:   #94918A;
  --ph-dim3:   #5E5B56;
  --ph-slot:   #43413D;
  --ph-rgb:    185, 181, 172;
  --ph-brand:  #B9B5AC;
  --tube-dirty: block;
  --tube-name: "DIRTY GRAY";
}

:root {
  /* == washes and hairlines, derived so a tube never restates them: l2 grid gaps, l3 panel borders, l5 button outlines == */
  --ph-scan:  rgba(var(--ph-rgb), .028);
  --ph-wash2: rgba(var(--ph-rgb), .06);
  --ph-wash:  rgba(var(--ph-rgb), .09);
  --ph-l1:    rgba(var(--ph-rgb), .14);
  --ph-l2:    rgba(var(--ph-rgb), .2);
  --ph-l3:    rgba(var(--ph-rgb), .24);
  --ph-l4:    rgba(var(--ph-rgb), .32);
  --ph-l5:    rgba(var(--ph-rgb), .44);

  /* == fixed: these mean something, so they never follow the tube == */
  --alert: #FF5555;
  --alert-rgb: 255, 85, 85;
  --alert-l: rgba(255, 85, 85, .45);
  --alert-wash: rgba(255, 85, 85, .12);
  --go: #00E08A;
  --go-rgb: 0, 224, 138;
  --go-l: rgba(0, 224, 138, .45);
  --info: #00C2FF;
  --info-rgb: 0, 194, 255;
  --info-l: rgba(0, 194, 255, .45);
  --teal: #59C6C6;
  --teal-l: rgba(89, 198, 198, .45);

  /* == surfaces: page, panel, emphasis == */
  --ink:      #07070A;
  --ink-soft: rgba(7, 7, 10, .72);
  --surface:  #0B0B0E;
  --em:       #0E0E0D;
  --em-bad:   #160B0B;
  --panel-glass: #000;

  /* == type: two faces, no exceptions. Departure Mono at 11 / 22 / 33 / 44 only,
        weight 400, no smoothing, bold as a 1px text shadow; IBM Plex Mono for
        sentences, 12px the floor == */
  --face-pixel: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --face-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* the four Departure sizes, as shorthands so no element invents a fifth */
  --dm11: 400 11px/1 var(--face-pixel);
  --dm11-title: 400 11px/1.45 var(--face-pixel);
  --dm22: 400 22px/1.3 var(--face-pixel);
  --dm22-title: 400 22px/1.25 var(--face-pixel);
  --dm22-num: 400 22px/1 var(--face-pixel);
  --dm33: 400 33px/1 var(--face-pixel);
  --dm33-title: 400 33px/1.2 var(--face-pixel);
  --dm44: 400 44px/1 var(--face-pixel);

  /* the roles, named so a template asks for a role and gets the grid size */
  --t-title:     var(--dm22-title);
  --t-section:   var(--dm22);
  --t-modal:     var(--dm22-title);
  --t-card:      var(--dm11-title);
  --t-micro:     var(--dm11);
  --t-button:    var(--dm11);
  --t-badge:     var(--dm11);
  --t-num:       var(--dm22-num);
  --t-body:      400 15px/1.7 var(--face-mono);
  --t-body-sm:   400 14px/1.7 var(--face-mono);
  --t-lede:      400 14.5px/1.7 var(--face-mono);
  --t-secondary: 400 13px/1.6 var(--face-mono);
  --t-caption:   400 12px/1.6 var(--face-mono);
  --t-data:      400 13px/1.6 var(--face-mono);

  /* whole pixels only */
  --track-title:  0;
  --track-micro:  1px;
  --track-button: 1px;
  --track-eyebrow: 1px;
  --track-code:   3px;

  /* pixel bold: never a weight, always this */
  --px-bold: 1px 0 0 currentColor;

  /* == space: 6 · 10 · 14 · 18 · 22 · 28 · 34 · 44 · 52 == */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 22px;
  --s6: 28px;
  --s7: 34px;
  --s8: 44px;
  --s9: 52px;

  --page-max: 1080px;
  --page-pad: var(--s6);
  --section-pad: var(--s8);
  --panel-pad: var(--s5);
  --measure: 60em;

  /* == geometry: 1px hairlines, 2px only on the device payload box == */
  --line: 1px;
  --line-payload: 2px;
  --focus-ring: 3px;
  --scanline: 4px;

  --hit: 44px;          /* floor for anything inside a page */
  --hit-floor: 26px;    /* absolute floor, nowhere goes below */
  --chrome-h: 60px;     /* persistent top chrome, pointer-only */

  /* == motion: pixel UIs cut, they do not transition == */
  --step: steps(1, end);
  --cy-blink-lid: 90ms;
  --cy-blink-shut: 130ms;
  --cy-blink-gap-min: 7s;
  --cy-blink-gap-max: 13s;
  --cy-scan: 2600ms;
  --cy-gaze-ease: 0.013;   /* pupil travel per frame, so the eye visibly trails */
  --cy-gaze-give-up: 3s;
}