@motion-proto/live-tokens 0.91.1 → 0.92.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/.claude/skills/live-tokens-create-component/references/sketch-mode.md +7 -4
  2. package/.claude/skills/live-tokens-create-page/SKILL.md +10 -3
  3. package/.claude/skills/live-tokens-set-type/SKILL.md +3 -3
  4. package/CHANGELOG.md +153 -0
  5. package/bin/lib/tokenVocabulary.mjs +2 -2
  6. package/bin/rules/testRuns.mjs +1 -1
  7. package/bin/rules/tokens.mjs +3 -3
  8. package/dist-plugin/chunk-JOSSYGR2.js +1634 -0
  9. package/dist-plugin/index.cjs +932 -15
  10. package/dist-plugin/index.js +1 -1
  11. package/dist-plugin/setType/index.cjs +23 -2
  12. package/dist-plugin/setType/index.js +23 -2
  13. package/dist-plugin/tokensCssMigrations/index.cjs +936 -15
  14. package/dist-plugin/tokensCssMigrations/index.d.cts +23 -3
  15. package/dist-plugin/tokensCssMigrations/index.d.ts +23 -3
  16. package/dist-plugin/tokensCssMigrations/index.js +5 -1
  17. package/package.json +1 -1
  18. package/src/app/site.css +243 -9
  19. package/src/demo/TestingLoops.svelte +9 -9
  20. package/src/editor/core/fonts/weightCoverage.ts +31 -2
  21. package/src/editor/core/palettes/tokenRegistry.ts +36 -37
  22. package/src/editor/core/sketch/sketchLayer.ts +23 -17
  23. package/src/editor/core/themes/parsers/mediaBlocks.ts +46 -0
  24. package/src/editor/core/typeScale/typeScale.ts +341 -0
  25. package/src/editor/skill-atlas/SourcePane.svelte +3 -3
  26. package/src/editor/skill-atlas/skillSources.generated.ts +3 -3
  27. package/src/editor/skill-atlas/trees/create-page.ts +14 -14
  28. package/src/editor/skill-atlas/trees/set-type.ts +2 -2
  29. package/src/editor/ui/UIFontFamilySelector.svelte +5 -1
  30. package/src/editor/ui/UIFontWeightSelector.svelte +4 -0
  31. package/src/editor/ui/UILetterSpacingSelector.svelte +4 -0
  32. package/src/editor/ui/UILineHeightSelector.svelte +4 -0
  33. package/src/editor/ui/UITextTransformSelector.svelte +4 -0
  34. package/src/editor/ui/UIVariantSelector.svelte +6 -8
  35. package/src/editor/ui/VariablesTab.svelte +4 -4
  36. package/src/editor/ui/sections/textStyles.ts +44 -92
  37. package/src/editor/ui/text-styles/ControlBody.svelte +100 -0
  38. package/src/editor/ui/text-styles/ResetIcon.svelte +60 -0
  39. package/src/editor/ui/text-styles/StepRow.svelte +330 -0
  40. package/src/editor/ui/text-styles/StyleControl.svelte +128 -0
  41. package/src/editor/ui/text-styles/TextStylesSection.svelte +551 -0
  42. package/src/editor/ui/text-styles/textStyleEdits.ts +308 -0
  43. package/src/editor/ui/variantScales.ts +16 -0
  44. package/src/system/styles/tokens.css +412 -48
  45. package/src/testing-js/page-compliance.contract.js +233 -80
  46. package/src/testing-js/page-compliance.contract.js.map +1 -1
  47. package/dist-plugin/chunk-GWMEYBZ2.js +0 -715
  48. package/src/editor/ui/TextStylesSection.svelte +0 -171
package/src/system/styles/tokens.css CHANGED
@@ -658,83 +658,372 @@
658
658
  --letter-spacing-wide: 0.04em;
659
659
  --letter-spacing-wider: 0.08em;
660
660
 
661
- /* Text styles — semantic typography roles. Bundles of aliases into the
662
- primitive scales; site.css maps elements to styles. */
663
- --heading-xl-font-family: var(--font-display);
664
- --heading-xl-font-size: var(--font-size-4xl);
665
- --heading-xl-font-weight: var(--font-weight-semibold);
661
+ /* Text styles: five usages, each a modular type scale. A usage's base and
662
+ ratio set every step's desktop size. Each tablet and phone size starts at
663
+ a recommendation the compression settings compute from the desktop size,
664
+ and never exceeds it. A step's -font-size resolves to the size for the
665
+ current viewport through the breakpoint blocks below. site.css maps
666
+ elements to steps. */
667
+ --type-tablet-scale-compression: 0.75;
668
+ --type-phone-scale-compression: 0.63;
669
+
670
+ /* Display: type outside the page outline, such as heroes, section titles
671
+ and big numbers. */
672
+ --display-font-family: var(--font-display);
673
+ --display-font-weight: var(--font-weight-semibold);
674
+ --display-scale-base: 3;
675
+ --display-scale-ratio: 1.2;
676
+
677
+ --display-2xl-font-family: var(--display-font-family);
678
+ --display-2xl-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 3) * 1rem);
679
+ --display-2xl-tablet-font-size: min(var(--display-2xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem));
680
+ --display-2xl-phone-font-size: min(var(--display-2xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem));
681
+ --display-2xl-font-size: var(--display-2xl-desktop-font-size);
682
+ --display-2xl-font-weight: var(--display-font-weight);
683
+ --display-2xl-line-height: var(--line-height-tightest);
684
+ --display-2xl-letter-spacing: var(--letter-spacing-tight);
685
+
686
+ --display-xl-font-family: var(--display-font-family);
687
+ --display-xl-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 2) * 1rem);
688
+ --display-xl-tablet-font-size: min(var(--display-xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem));
689
+ --display-xl-phone-font-size: min(var(--display-xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem));
690
+ --display-xl-font-size: var(--display-xl-desktop-font-size);
691
+ --display-xl-font-weight: var(--display-font-weight);
692
+ --display-xl-line-height: var(--line-height-tightest);
693
+ --display-xl-letter-spacing: var(--letter-spacing-tight);
694
+
695
+ --display-lg-font-family: var(--display-font-family);
696
+ --display-lg-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 1) * 1rem);
697
+ --display-lg-tablet-font-size: min(var(--display-lg-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem));
698
+ --display-lg-phone-font-size: min(var(--display-lg-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem));
699
+ --display-lg-font-size: var(--display-lg-desktop-font-size);
700
+ --display-lg-font-weight: var(--display-font-weight);
701
+ --display-lg-line-height: var(--line-height-tightest);
702
+ --display-lg-letter-spacing: var(--letter-spacing-tight);
703
+
704
+ --display-md-font-family: var(--display-font-family);
705
+ --display-md-desktop-font-size: calc(var(--display-scale-base) * 1rem);
706
+ --display-md-tablet-font-size: min(var(--display-md-desktop-font-size), calc(pow(var(--display-scale-base), var(--type-tablet-scale-compression)) * 1rem));
707
+ --display-md-phone-font-size: min(var(--display-md-desktop-font-size), calc(pow(var(--display-scale-base), var(--type-phone-scale-compression)) * 1rem));
708
+ --display-md-font-size: var(--display-md-desktop-font-size);
709
+ --display-md-font-weight: var(--display-font-weight);
710
+ --display-md-line-height: var(--line-height-tightest);
711
+ --display-md-letter-spacing: var(--letter-spacing-normal);
712
+
713
+ --display-sm-font-family: var(--display-font-family);
714
+ --display-sm-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -1) * 1rem);
715
+ --display-sm-tablet-font-size: min(var(--display-sm-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem));
716
+ --display-sm-phone-font-size: min(var(--display-sm-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem));
717
+ --display-sm-font-size: var(--display-sm-desktop-font-size);
718
+ --display-sm-font-weight: var(--display-font-weight);
719
+ --display-sm-line-height: var(--line-height-tighter);
720
+ --display-sm-letter-spacing: var(--letter-spacing-normal);
721
+
722
+ --display-xs-font-family: var(--display-font-family);
723
+ --display-xs-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -2) * 1rem);
724
+ --display-xs-tablet-font-size: min(var(--display-xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem));
725
+ --display-xs-phone-font-size: min(var(--display-xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem));
726
+ --display-xs-font-size: var(--display-xs-desktop-font-size);
727
+ --display-xs-font-weight: var(--display-font-weight);
728
+ --display-xs-line-height: var(--line-height-tighter);
729
+ --display-xs-letter-spacing: var(--letter-spacing-normal);
730
+
731
+ --display-2xs-font-family: var(--display-font-family);
732
+ --display-2xs-desktop-font-size: calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -3) * 1rem);
733
+ --display-2xs-tablet-font-size: min(var(--display-2xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem));
734
+ --display-2xs-phone-font-size: min(var(--display-2xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem));
735
+ --display-2xs-font-size: var(--display-2xs-desktop-font-size);
736
+ --display-2xs-font-weight: var(--display-font-weight);
737
+ --display-2xs-line-height: var(--line-height-tighter);
738
+ --display-2xs-letter-spacing: var(--letter-spacing-normal);
739
+
740
+ /* Heading: the page outline, h1 at xl down to h6 at 2xs. The sm, xs and
741
+ 2xs steps pin the sans face. */
742
+ --heading-font-family: var(--font-display);
743
+ --heading-font-weight: var(--font-weight-semibold);
744
+ --heading-scale-base: 1.5;
745
+ --heading-scale-ratio: 1.25;
746
+
747
+ --heading-2xl-font-family: var(--heading-font-family);
748
+ --heading-2xl-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3) * 1rem);
749
+ --heading-2xl-tablet-font-size: min(var(--heading-2xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem));
750
+ --heading-2xl-phone-font-size: min(var(--heading-2xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem));
751
+ --heading-2xl-font-size: var(--heading-2xl-desktop-font-size);
752
+ --heading-2xl-font-weight: var(--heading-font-weight);
753
+ --heading-2xl-line-height: var(--line-height-tightest);
754
+ --heading-2xl-letter-spacing: var(--letter-spacing-normal);
755
+
756
+ --heading-xl-font-family: var(--heading-font-family);
757
+ --heading-xl-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2) * 1rem);
758
+ --heading-xl-tablet-font-size: min(var(--heading-xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem));
759
+ --heading-xl-phone-font-size: min(var(--heading-xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem));
760
+ --heading-xl-font-size: var(--heading-xl-desktop-font-size);
761
+ --heading-xl-font-weight: var(--heading-font-weight);
666
762
  --heading-xl-line-height: var(--line-height-tightest);
667
763
  --heading-xl-letter-spacing: var(--letter-spacing-normal);
668
764
 
669
- --heading-lg-font-family: var(--font-display);
670
- --heading-lg-font-size: var(--font-size-2xl);
671
- --heading-lg-font-weight: var(--font-weight-semibold);
765
+ --heading-lg-font-family: var(--heading-font-family);
766
+ --heading-lg-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1) * 1rem);
767
+ --heading-lg-tablet-font-size: min(var(--heading-lg-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem));
768
+ --heading-lg-phone-font-size: min(var(--heading-lg-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem));
769
+ --heading-lg-font-size: var(--heading-lg-desktop-font-size);
770
+ --heading-lg-font-weight: var(--heading-font-weight);
672
771
  --heading-lg-line-height: var(--line-height-tightest);
673
772
  --heading-lg-letter-spacing: var(--letter-spacing-normal);
674
773
 
675
- --heading-md-font-family: var(--font-display);
676
- --heading-md-font-size: var(--font-size-xl);
677
- --heading-md-font-weight: var(--font-weight-semibold);
774
+ --heading-md-font-family: var(--heading-font-family);
775
+ --heading-md-desktop-font-size: calc(var(--heading-scale-base) * 1rem);
776
+ --heading-md-tablet-font-size: min(var(--heading-md-desktop-font-size), calc(pow(var(--heading-scale-base), var(--type-tablet-scale-compression)) * 1rem));
777
+ --heading-md-phone-font-size: min(var(--heading-md-desktop-font-size), calc(pow(var(--heading-scale-base), var(--type-phone-scale-compression)) * 1rem));
778
+ --heading-md-font-size: var(--heading-md-desktop-font-size);
779
+ --heading-md-font-weight: var(--heading-font-weight);
678
780
  --heading-md-line-height: var(--line-height-tighter);
679
781
  --heading-md-letter-spacing: var(--letter-spacing-normal);
680
782
 
681
783
  --heading-sm-font-family: var(--font-sans);
682
- --heading-sm-font-size: var(--font-size-lg);
683
- --heading-sm-font-weight: var(--font-weight-semibold);
784
+ --heading-sm-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1) * 1rem);
785
+ --heading-sm-tablet-font-size: min(var(--heading-sm-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem));
786
+ --heading-sm-phone-font-size: min(var(--heading-sm-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem));
787
+ --heading-sm-font-size: var(--heading-sm-desktop-font-size);
788
+ --heading-sm-font-weight: var(--heading-font-weight);
684
789
  --heading-sm-line-height: var(--line-height-tighter);
685
790
  --heading-sm-letter-spacing: var(--letter-spacing-normal);
686
791
 
687
- --body-md-font-family: var(--font-sans);
688
- --body-md-font-size: var(--font-size-md);
689
- --body-md-font-weight: var(--font-weight-normal);
792
+ --heading-xs-font-family: var(--font-sans);
793
+ --heading-xs-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2) * 1rem);
794
+ --heading-xs-tablet-font-size: min(var(--heading-xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem));
795
+ --heading-xs-phone-font-size: min(var(--heading-xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem));
796
+ --heading-xs-font-size: var(--heading-xs-desktop-font-size);
797
+ --heading-xs-font-weight: var(--heading-font-weight);
798
+ --heading-xs-line-height: var(--line-height-tight);
799
+ --heading-xs-letter-spacing: var(--letter-spacing-normal);
800
+
801
+ --heading-2xs-font-family: var(--font-sans);
802
+ --heading-2xs-desktop-font-size: calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3) * 1rem);
803
+ --heading-2xs-tablet-font-size: min(var(--heading-2xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem));
804
+ --heading-2xs-phone-font-size: min(var(--heading-2xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem));
805
+ --heading-2xs-font-size: var(--heading-2xs-desktop-font-size);
806
+ --heading-2xs-font-weight: var(--heading-font-weight);
807
+ --heading-2xs-line-height: var(--line-height-tight);
808
+ --heading-2xs-letter-spacing: var(--letter-spacing-normal);
809
+
810
+ /* Body: interface text and short copy. */
811
+ --body-font-family: var(--font-sans);
812
+ --body-font-weight: var(--font-weight-normal);
813
+ --body-scale-base: 1;
814
+ --body-scale-ratio: 1.125;
815
+
816
+ --body-2xl-font-family: var(--body-font-family);
817
+ --body-2xl-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 3) * 1rem);
818
+ --body-2xl-tablet-font-size: min(var(--body-2xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem));
819
+ --body-2xl-phone-font-size: min(var(--body-2xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem));
820
+ --body-2xl-font-size: var(--body-2xl-desktop-font-size);
821
+ --body-2xl-font-weight: var(--body-font-weight);
822
+ --body-2xl-line-height: var(--line-height-tighter);
823
+ --body-2xl-letter-spacing: var(--letter-spacing-normal);
824
+
825
+ --body-xl-font-family: var(--body-font-family);
826
+ --body-xl-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 2) * 1rem);
827
+ --body-xl-tablet-font-size: min(var(--body-xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem));
828
+ --body-xl-phone-font-size: min(var(--body-xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem));
829
+ --body-xl-font-size: var(--body-xl-desktop-font-size);
830
+ --body-xl-font-weight: var(--body-font-weight);
831
+ --body-xl-line-height: var(--line-height-tighter);
832
+ --body-xl-letter-spacing: var(--letter-spacing-normal);
833
+
834
+ --body-lg-font-family: var(--body-font-family);
835
+ --body-lg-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 1) * 1rem);
836
+ --body-lg-tablet-font-size: min(var(--body-lg-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem));
837
+ --body-lg-phone-font-size: min(var(--body-lg-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem));
838
+ --body-lg-font-size: var(--body-lg-desktop-font-size);
839
+ --body-lg-font-weight: var(--body-font-weight);
840
+ --body-lg-line-height: var(--line-height-tight);
841
+ --body-lg-letter-spacing: var(--letter-spacing-normal);
842
+
843
+ --body-md-font-family: var(--body-font-family);
844
+ --body-md-desktop-font-size: calc(var(--body-scale-base) * 1rem);
845
+ --body-md-tablet-font-size: min(var(--body-md-desktop-font-size), calc(pow(var(--body-scale-base), var(--type-tablet-scale-compression)) * 1rem));
846
+ --body-md-phone-font-size: min(var(--body-md-desktop-font-size), calc(pow(var(--body-scale-base), var(--type-phone-scale-compression)) * 1rem));
847
+ --body-md-font-size: var(--body-md-desktop-font-size);
848
+ --body-md-font-weight: var(--body-font-weight);
690
849
  --body-md-line-height: var(--line-height-normal);
691
850
  --body-md-letter-spacing: var(--letter-spacing-normal);
692
851
 
693
- --body-sm-font-family: var(--font-sans);
694
- --body-sm-font-size: var(--font-size-sm);
695
- --body-sm-font-weight: var(--font-weight-normal);
852
+ --body-sm-font-family: var(--body-font-family);
853
+ --body-sm-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -1) * 1rem);
854
+ --body-sm-tablet-font-size: min(var(--body-sm-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem));
855
+ --body-sm-phone-font-size: min(var(--body-sm-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem));
856
+ --body-sm-font-size: var(--body-sm-desktop-font-size);
857
+ --body-sm-font-weight: var(--body-font-weight);
696
858
  --body-sm-line-height: var(--line-height-tight);
697
859
  --body-sm-letter-spacing: var(--letter-spacing-normal);
698
860
 
699
- --code-font-family: var(--font-mono);
700
- --code-font-size: var(--font-size-sm);
701
- --code-font-weight: var(--font-weight-normal);
702
- --code-line-height: var(--line-height-normal);
703
- --code-letter-spacing: var(--letter-spacing-normal);
704
-
705
- /* Editorial — the long-reading role. `md` is the reading step and takes the
706
- most open leading; every step away from it tightens by one, so a lede or a
707
- pull quote is not set at reading leading. Sizes stay inside the xs–xl band
708
- the responsive scale leaves constant, so an article does not resize itself
709
- between breakpoints. */
710
- --editorial-xl-font-family: var(--font-editorial);
711
- --editorial-xl-font-size: var(--font-size-xl);
712
- --editorial-xl-font-weight: var(--font-weight-normal);
861
+ --body-xs-font-family: var(--body-font-family);
862
+ --body-xs-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -2) * 1rem);
863
+ --body-xs-tablet-font-size: min(var(--body-xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem));
864
+ --body-xs-phone-font-size: min(var(--body-xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem));
865
+ --body-xs-font-size: var(--body-xs-desktop-font-size);
866
+ --body-xs-font-weight: var(--body-font-weight);
867
+ --body-xs-line-height: var(--line-height-tight);
868
+ --body-xs-letter-spacing: var(--letter-spacing-normal);
869
+
870
+ --body-2xs-font-family: var(--body-font-family);
871
+ --body-2xs-desktop-font-size: calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -3) * 1rem);
872
+ --body-2xs-tablet-font-size: min(var(--body-2xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem));
873
+ --body-2xs-phone-font-size: min(var(--body-2xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem));
874
+ --body-2xs-font-size: var(--body-2xs-desktop-font-size);
875
+ --body-2xs-font-weight: var(--body-font-weight);
876
+ --body-2xs-line-height: var(--line-height-tight);
877
+ --body-2xs-letter-spacing: var(--letter-spacing-normal);
878
+
879
+ /* Editorial: the long-reading role. `md` is the reading step and takes the
880
+ most open leading. Each step away from it tightens by one, and the steps
881
+ below md stop at tighter so small text stays legible. */
882
+ --editorial-font-family: var(--font-editorial);
883
+ --editorial-font-weight: var(--font-weight-normal);
884
+ --editorial-scale-base: 1;
885
+ --editorial-scale-ratio: 1.125;
886
+
887
+ --editorial-2xl-font-family: var(--editorial-font-family);
888
+ --editorial-2xl-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3) * 1rem);
889
+ --editorial-2xl-tablet-font-size: min(var(--editorial-2xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem));
890
+ --editorial-2xl-phone-font-size: min(var(--editorial-2xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem));
891
+ --editorial-2xl-font-size: var(--editorial-2xl-desktop-font-size);
892
+ --editorial-2xl-font-weight: var(--editorial-font-weight);
893
+ --editorial-2xl-line-height: var(--line-height-tightest);
894
+ --editorial-2xl-letter-spacing: var(--letter-spacing-normal);
895
+
896
+ --editorial-xl-font-family: var(--editorial-font-family);
897
+ --editorial-xl-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2) * 1rem);
898
+ --editorial-xl-tablet-font-size: min(var(--editorial-xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem));
899
+ --editorial-xl-phone-font-size: min(var(--editorial-xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem));
900
+ --editorial-xl-font-size: var(--editorial-xl-desktop-font-size);
901
+ --editorial-xl-font-weight: var(--editorial-font-weight);
713
902
  --editorial-xl-line-height: var(--line-height-tighter);
714
903
  --editorial-xl-letter-spacing: var(--letter-spacing-normal);
715
904
 
716
- --editorial-lg-font-family: var(--font-editorial);
717
- --editorial-lg-font-size: var(--font-size-lg);
718
- --editorial-lg-font-weight: var(--font-weight-normal);
905
+ --editorial-lg-font-family: var(--editorial-font-family);
906
+ --editorial-lg-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1) * 1rem);
907
+ --editorial-lg-tablet-font-size: min(var(--editorial-lg-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem));
908
+ --editorial-lg-phone-font-size: min(var(--editorial-lg-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem));
909
+ --editorial-lg-font-size: var(--editorial-lg-desktop-font-size);
910
+ --editorial-lg-font-weight: var(--editorial-font-weight);
719
911
  --editorial-lg-line-height: var(--line-height-tight);
720
912
  --editorial-lg-letter-spacing: var(--letter-spacing-normal);
721
913
 
722
- --editorial-md-font-family: var(--font-editorial);
723
- --editorial-md-font-size: var(--font-size-md);
724
- --editorial-md-font-weight: var(--font-weight-normal);
914
+ --editorial-md-font-family: var(--editorial-font-family);
915
+ --editorial-md-desktop-font-size: calc(var(--editorial-scale-base) * 1rem);
916
+ --editorial-md-tablet-font-size: min(var(--editorial-md-desktop-font-size), calc(pow(var(--editorial-scale-base), var(--type-tablet-scale-compression)) * 1rem));
917
+ --editorial-md-phone-font-size: min(var(--editorial-md-desktop-font-size), calc(pow(var(--editorial-scale-base), var(--type-phone-scale-compression)) * 1rem));
918
+ --editorial-md-font-size: var(--editorial-md-desktop-font-size);
919
+ --editorial-md-font-weight: var(--editorial-font-weight);
725
920
  --editorial-md-line-height: var(--line-height-normal);
726
921
  --editorial-md-letter-spacing: var(--letter-spacing-normal);
727
922
 
728
- --editorial-sm-font-family: var(--font-editorial);
729
- --editorial-sm-font-size: var(--font-size-sm);
730
- --editorial-sm-font-weight: var(--font-weight-normal);
923
+ --editorial-sm-font-family: var(--editorial-font-family);
924
+ --editorial-sm-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1) * 1rem);
925
+ --editorial-sm-tablet-font-size: min(var(--editorial-sm-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem));
926
+ --editorial-sm-phone-font-size: min(var(--editorial-sm-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem));
927
+ --editorial-sm-font-size: var(--editorial-sm-desktop-font-size);
928
+ --editorial-sm-font-weight: var(--editorial-font-weight);
731
929
  --editorial-sm-line-height: var(--line-height-tight);
732
930
  --editorial-sm-letter-spacing: var(--letter-spacing-normal);
733
931
 
734
- /* Eyebrow — values track the existing .eyebrow class in src/app/Home.svelte. */
735
- --eyebrow-font-family: var(--font-sans);
736
- --eyebrow-font-size: var(--font-size-sm);
737
- --eyebrow-font-weight: var(--font-weight-normal);
932
+ --editorial-xs-font-family: var(--editorial-font-family);
933
+ --editorial-xs-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2) * 1rem);
934
+ --editorial-xs-tablet-font-size: min(var(--editorial-xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem));
935
+ --editorial-xs-phone-font-size: min(var(--editorial-xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem));
936
+ --editorial-xs-font-size: var(--editorial-xs-desktop-font-size);
937
+ --editorial-xs-font-weight: var(--editorial-font-weight);
938
+ --editorial-xs-line-height: var(--line-height-tighter);
939
+ --editorial-xs-letter-spacing: var(--letter-spacing-normal);
940
+
941
+ --editorial-2xs-font-family: var(--editorial-font-family);
942
+ --editorial-2xs-desktop-font-size: calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3) * 1rem);
943
+ --editorial-2xs-tablet-font-size: min(var(--editorial-2xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem));
944
+ --editorial-2xs-phone-font-size: min(var(--editorial-2xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem));
945
+ --editorial-2xs-font-size: var(--editorial-2xs-desktop-font-size);
946
+ --editorial-2xs-font-weight: var(--editorial-font-weight);
947
+ --editorial-2xs-line-height: var(--line-height-tighter);
948
+ --editorial-2xs-letter-spacing: var(--letter-spacing-normal);
949
+
950
+ /* Code: code blocks and inline code. */
951
+ --code-font-family: var(--font-mono);
952
+ --code-font-weight: var(--font-weight-normal);
953
+ --code-scale-base: 0.875;
954
+ --code-scale-ratio: 1.125;
955
+
956
+ --code-2xl-font-family: var(--code-font-family);
957
+ --code-2xl-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 3) * 1rem);
958
+ --code-2xl-tablet-font-size: min(var(--code-2xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem));
959
+ --code-2xl-phone-font-size: min(var(--code-2xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem));
960
+ --code-2xl-font-size: var(--code-2xl-desktop-font-size);
961
+ --code-2xl-font-weight: var(--code-font-weight);
962
+ --code-2xl-line-height: var(--line-height-normal);
963
+ --code-2xl-letter-spacing: var(--letter-spacing-normal);
964
+
965
+ --code-xl-font-family: var(--code-font-family);
966
+ --code-xl-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 2) * 1rem);
967
+ --code-xl-tablet-font-size: min(var(--code-xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem));
968
+ --code-xl-phone-font-size: min(var(--code-xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem));
969
+ --code-xl-font-size: var(--code-xl-desktop-font-size);
970
+ --code-xl-font-weight: var(--code-font-weight);
971
+ --code-xl-line-height: var(--line-height-normal);
972
+ --code-xl-letter-spacing: var(--letter-spacing-normal);
973
+
974
+ --code-lg-font-family: var(--code-font-family);
975
+ --code-lg-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 1) * 1rem);
976
+ --code-lg-tablet-font-size: min(var(--code-lg-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem));
977
+ --code-lg-phone-font-size: min(var(--code-lg-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem));
978
+ --code-lg-font-size: var(--code-lg-desktop-font-size);
979
+ --code-lg-font-weight: var(--code-font-weight);
980
+ --code-lg-line-height: var(--line-height-normal);
981
+ --code-lg-letter-spacing: var(--letter-spacing-normal);
982
+
983
+ --code-md-font-family: var(--code-font-family);
984
+ --code-md-desktop-font-size: calc(var(--code-scale-base) * 1rem);
985
+ --code-md-tablet-font-size: min(var(--code-md-desktop-font-size), calc(pow(var(--code-scale-base), var(--type-tablet-scale-compression)) * 1rem));
986
+ --code-md-phone-font-size: min(var(--code-md-desktop-font-size), calc(pow(var(--code-scale-base), var(--type-phone-scale-compression)) * 1rem));
987
+ --code-md-font-size: var(--code-md-desktop-font-size);
988
+ --code-md-font-weight: var(--code-font-weight);
989
+ --code-md-line-height: var(--line-height-normal);
990
+ --code-md-letter-spacing: var(--letter-spacing-normal);
991
+
992
+ --code-sm-font-family: var(--code-font-family);
993
+ --code-sm-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -1) * 1rem);
994
+ --code-sm-tablet-font-size: min(var(--code-sm-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem));
995
+ --code-sm-phone-font-size: min(var(--code-sm-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem));
996
+ --code-sm-font-size: var(--code-sm-desktop-font-size);
997
+ --code-sm-font-weight: var(--code-font-weight);
998
+ --code-sm-line-height: var(--line-height-normal);
999
+ --code-sm-letter-spacing: var(--letter-spacing-normal);
1000
+
1001
+ --code-xs-font-family: var(--code-font-family);
1002
+ --code-xs-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -2) * 1rem);
1003
+ --code-xs-tablet-font-size: min(var(--code-xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem));
1004
+ --code-xs-phone-font-size: min(var(--code-xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem));
1005
+ --code-xs-font-size: var(--code-xs-desktop-font-size);
1006
+ --code-xs-font-weight: var(--code-font-weight);
1007
+ --code-xs-line-height: var(--line-height-normal);
1008
+ --code-xs-letter-spacing: var(--letter-spacing-normal);
1009
+
1010
+ --code-2xs-font-family: var(--code-font-family);
1011
+ --code-2xs-desktop-font-size: calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -3) * 1rem);
1012
+ --code-2xs-tablet-font-size: min(var(--code-2xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem));
1013
+ --code-2xs-phone-font-size: min(var(--code-2xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem));
1014
+ --code-2xs-font-size: var(--code-2xs-desktop-font-size);
1015
+ --code-2xs-font-weight: var(--code-font-weight);
1016
+ --code-2xs-line-height: var(--line-height-normal);
1017
+ --code-2xs-letter-spacing: var(--letter-spacing-normal);
1018
+
1019
+ /* Eyebrow: values track the existing .eyebrow class in src/app/Home.svelte.
1020
+ Its face and weight follow body, and its sizes follow body-sm. */
1021
+ --eyebrow-font-family: var(--body-font-family);
1022
+ --eyebrow-desktop-font-size: var(--body-sm-desktop-font-size);
1023
+ --eyebrow-tablet-font-size: var(--body-sm-tablet-font-size);
1024
+ --eyebrow-phone-font-size: var(--body-sm-phone-font-size);
1025
+ --eyebrow-font-size: var(--eyebrow-desktop-font-size);
1026
+ --eyebrow-font-weight: var(--body-font-weight);
738
1027
  --eyebrow-line-height: var(--line-height-normal);
739
1028
  --eyebrow-letter-spacing: var(--letter-spacing-normal);
740
1029
  --eyebrow-text-transform: none;
@@ -747,8 +1036,9 @@
747
1036
  --text-alternate-disabled: oklch(0.3523 0 0);
748
1037
  }
749
1038
 
750
- /* RESPONSIVE TYPE SCALE — display sizes (2xl–6xl) shrink on small
751
- viewports; body sizes (xs–xl) stay constant. */
1039
+ /* RESPONSIVE TYPE SCALE. The primitive display sizes (2xl to 7xl) shrink on
1040
+ small viewports, and the body sizes (xs to xl) hold. Each text style's
1041
+ -font-size re-points to its tablet or phone size. */
752
1042
 
753
1043
  @media (max-width: 768px) {
754
1044
  :root {
@@ -758,6 +1048,43 @@
758
1048
  --font-size-5xl: 2.25rem; /* 36px */
759
1049
  --font-size-6xl: 2.5rem; /* 40px */
760
1050
  --font-size-7xl: 3rem; /* 48px */
1051
+
1052
+ --display-2xl-font-size: var(--display-2xl-tablet-font-size);
1053
+ --display-xl-font-size: var(--display-xl-tablet-font-size);
1054
+ --display-lg-font-size: var(--display-lg-tablet-font-size);
1055
+ --display-md-font-size: var(--display-md-tablet-font-size);
1056
+ --display-sm-font-size: var(--display-sm-tablet-font-size);
1057
+ --display-xs-font-size: var(--display-xs-tablet-font-size);
1058
+ --display-2xs-font-size: var(--display-2xs-tablet-font-size);
1059
+ --heading-2xl-font-size: var(--heading-2xl-tablet-font-size);
1060
+ --heading-xl-font-size: var(--heading-xl-tablet-font-size);
1061
+ --heading-lg-font-size: var(--heading-lg-tablet-font-size);
1062
+ --heading-md-font-size: var(--heading-md-tablet-font-size);
1063
+ --heading-sm-font-size: var(--heading-sm-tablet-font-size);
1064
+ --heading-xs-font-size: var(--heading-xs-tablet-font-size);
1065
+ --heading-2xs-font-size: var(--heading-2xs-tablet-font-size);
1066
+ --body-2xl-font-size: var(--body-2xl-tablet-font-size);
1067
+ --body-xl-font-size: var(--body-xl-tablet-font-size);
1068
+ --body-lg-font-size: var(--body-lg-tablet-font-size);
1069
+ --body-md-font-size: var(--body-md-tablet-font-size);
1070
+ --body-sm-font-size: var(--body-sm-tablet-font-size);
1071
+ --body-xs-font-size: var(--body-xs-tablet-font-size);
1072
+ --body-2xs-font-size: var(--body-2xs-tablet-font-size);
1073
+ --editorial-2xl-font-size: var(--editorial-2xl-tablet-font-size);
1074
+ --editorial-xl-font-size: var(--editorial-xl-tablet-font-size);
1075
+ --editorial-lg-font-size: var(--editorial-lg-tablet-font-size);
1076
+ --editorial-md-font-size: var(--editorial-md-tablet-font-size);
1077
+ --editorial-sm-font-size: var(--editorial-sm-tablet-font-size);
1078
+ --editorial-xs-font-size: var(--editorial-xs-tablet-font-size);
1079
+ --editorial-2xs-font-size: var(--editorial-2xs-tablet-font-size);
1080
+ --code-2xl-font-size: var(--code-2xl-tablet-font-size);
1081
+ --code-xl-font-size: var(--code-xl-tablet-font-size);
1082
+ --code-lg-font-size: var(--code-lg-tablet-font-size);
1083
+ --code-md-font-size: var(--code-md-tablet-font-size);
1084
+ --code-sm-font-size: var(--code-sm-tablet-font-size);
1085
+ --code-xs-font-size: var(--code-xs-tablet-font-size);
1086
+ --code-2xs-font-size: var(--code-2xs-tablet-font-size);
1087
+ --eyebrow-font-size: var(--eyebrow-tablet-font-size);
761
1088
  }
762
1089
  }
763
1090
 
@@ -769,5 +1096,42 @@
769
1096
  --font-size-5xl: 2rem; /* 32px */
770
1097
  --font-size-6xl: 2.25rem; /* 36px */
771
1098
  --font-size-7xl: 2.625rem; /* 42px */
1099
+
1100
+ --display-2xl-font-size: var(--display-2xl-phone-font-size);
1101
+ --display-xl-font-size: var(--display-xl-phone-font-size);
1102
+ --display-lg-font-size: var(--display-lg-phone-font-size);
1103
+ --display-md-font-size: var(--display-md-phone-font-size);
1104
+ --display-sm-font-size: var(--display-sm-phone-font-size);
1105
+ --display-xs-font-size: var(--display-xs-phone-font-size);
1106
+ --display-2xs-font-size: var(--display-2xs-phone-font-size);
1107
+ --heading-2xl-font-size: var(--heading-2xl-phone-font-size);
1108
+ --heading-xl-font-size: var(--heading-xl-phone-font-size);
1109
+ --heading-lg-font-size: var(--heading-lg-phone-font-size);
1110
+ --heading-md-font-size: var(--heading-md-phone-font-size);
1111
+ --heading-sm-font-size: var(--heading-sm-phone-font-size);
1112
+ --heading-xs-font-size: var(--heading-xs-phone-font-size);
1113
+ --heading-2xs-font-size: var(--heading-2xs-phone-font-size);
1114
+ --body-2xl-font-size: var(--body-2xl-phone-font-size);
1115
+ --body-xl-font-size: var(--body-xl-phone-font-size);
1116
+ --body-lg-font-size: var(--body-lg-phone-font-size);
1117
+ --body-md-font-size: var(--body-md-phone-font-size);
1118
+ --body-sm-font-size: var(--body-sm-phone-font-size);
1119
+ --body-xs-font-size: var(--body-xs-phone-font-size);
1120
+ --body-2xs-font-size: var(--body-2xs-phone-font-size);
1121
+ --editorial-2xl-font-size: var(--editorial-2xl-phone-font-size);
1122
+ --editorial-xl-font-size: var(--editorial-xl-phone-font-size);
1123
+ --editorial-lg-font-size: var(--editorial-lg-phone-font-size);
1124
+ --editorial-md-font-size: var(--editorial-md-phone-font-size);
1125
+ --editorial-sm-font-size: var(--editorial-sm-phone-font-size);
1126
+ --editorial-xs-font-size: var(--editorial-xs-phone-font-size);
1127
+ --editorial-2xs-font-size: var(--editorial-2xs-phone-font-size);
1128
+ --code-2xl-font-size: var(--code-2xl-phone-font-size);
1129
+ --code-xl-font-size: var(--code-xl-phone-font-size);
1130
+ --code-lg-font-size: var(--code-lg-phone-font-size);
1131
+ --code-md-font-size: var(--code-md-phone-font-size);
1132
+ --code-sm-font-size: var(--code-sm-phone-font-size);
1133
+ --code-xs-font-size: var(--code-xs-phone-font-size);
1134
+ --code-2xs-font-size: var(--code-2xs-phone-font-size);
1135
+ --eyebrow-font-size: var(--eyebrow-phone-font-size);
772
1136
  }
773
1137
  }